CSS: justify menu items

Đặ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: "";
    awidth: 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 awidth 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: