CSS: justify menu items
HTML
28
CSS
40
White

Toan Nguyen viết ngày 15/10/2015

Đặt vấn đề

Đây là mẹo khi style một menu có thiết kế trải đều hết chiều rộng container mà số lượng item không cố định.

Kiểu như:
--| Menu 1 - Menu 2 - Menu 3 |--

Menu 1 nằm sát bên trái
Menu 2 ở giữa
Menu 3 nằm sát bên phải
Menu phải chiếm trọn chiều rộng của container.

Mẹo như này:

<ul class="menu">
    <li class="menu-item">menu 1</li>
    <li class="menu-item">menu 2</li>
    <li class="menu-item">menu 3</li>
    <li class="menu-item">menu 4</li>
</ul>
.menu{
    text-align: justify;
}
.menu:after{
    content: "";
    width: 100%;
    display: inline-block;
}
.menu-item{
    display: inline-block; /* inline cũng được */
}

Mấu chốt vấn đề ở đây là style .menu:after. Chúng ta dùng text-align: justify để canh đều menu item. Nhưng kết quả là các menu item sẽ dồn hết về bên trái. Mẹo là thêm 1 dòng nữa và set width 100% cho dòng này để các dòng menu item được canh đều lại.

Mình trình bày không được rõ lắm mong các bạn thông cảm, thử là sẽ thấy kết quả :D

Bổ sung jsfiddle:

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Toan Nguyen

3 bài viết.
4 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
6 3
Sau đây là cách để tạo một square div và canh giữa theo chiều dọc bằng css. Đây là cách làm rất hay, hỗ trợ được những browser đời cũ như IE8 mà ko...
Toan Nguyen viết 3 năm trước
6 3
Bài viết liên quan
Male avatar
0 2
Chào mọi người, trong bài viết này chúng ta sẽ tìm hiểu cách (Link) 1 cách đơn giản dễ làm với HTML và Google Charts. Đầu tiên các bạn tạo 1 file ...
TungVuong viết 3 tháng trước
0 2
White
20 7
(Ảnh) (Ảnh) (Ảnh) (Ảnh) (Ảnh) (Ảnh) (Ảnh) (Ảnh) (Ảnh) (Ảnh) Like status gốc để hóng phần 2 nhé :P. (Link)
Huy Hoàng Phạm viết hơn 1 năm trước
20 7
White
12 5
Bạn nhìn hình dưới đây, nếu app của bạn xuất hiện nhiều khối blockgrid thế này thì mình nghĩ bạn nên viết nó thành 1 component CSS. Trong phần này...
My Mai viết 3 năm trước
12 5
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
3 bài viết.
4 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!