CSS: justify menu items

HTML

28

CSS

40

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: