Xóa bài viết
Bạn có chắc chắn muốn xóa bài viết này không ?
Xóa bình luận
Bạn có chắc chắn muốn xóa bình luận này không ?
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: "";
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
{{ comment.user.name }}
Bỏ hay
Hay
Cùng một tác giả
9
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...
2
1
Hôm qua mình có setup 1 cái VPS để cài wordpress. Cài được rồi thì upload theme & plugins lên để dùng thì wordpress không có quyền ghi lên thư mục ...
Bài viết liên quan
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 ...
1
2
Lời tựa Frontend nói chung và CSS nói riêng vẫn đang được phát triển liên tục. Ngoài những kiến thức cơ bản, bạn cũng nên cập nhật những kĩ thuật/...