Video: Hướng dẫn xây dựng giao diện web đơn giản với HTML CSS 2025
Đôi khi, bạn muốn thanh nút ngang. Bởi vì danh sách HTML5 có xu hướng thẳng đứng, bạn có thể bị cám dỗ để nghĩ rằng một danh sách ngang không thể. Trên thực tế, CSS3 cung cấp tất cả những gì bạn cần để chuyển đổi chính xác cùng một HTML thành một danh sách ngang.
Không cần phải hiển thị HTML nữa bởi vì nó không hề thay đổi. (Không phải là CSS vĩ đại?) Ngay cả khi CSS không thay đổi nhiều:
#menu ul {margin-left: -2. 5em;} #menu li {list-style-type: none; chiều rộng: 7em; text-align: trung tâm; float: left;} #menu a {text-decoration: none; màu đen; hiển thị: khối; màu nền: #EEEEFF; hộp bóng tối: 5px 5px 5px xám; margin-bottom: 2px; lề phải: 2px; bán kính biên giới: 5px; border: 3px outset #EEEEFF;} #menu a: hover {background-color: #DDDDEE; hộp bóng: 3px 3px 3px xám; border: none;}
Các sửa đổi rất đơn giản:
-
Nổi cho mỗi mục trong danh sách bằng cách cho mỗi li một float: giá trị còn lại:
#menu li {list-style-type: none; phao: trái; chiều rộng: 5e; Di chuyển margin-left của toàn bộ ul bằng cách lấy định dạng margin-left từ các phần tử li và chuyển nó sang ul: -
#menu ul {margin-left: -2. 5em;}
Thêm lề phải.
-
Bây giờ thanh thanh nằm ngang, thêm một khoảng trống nhỏ ở bên phải mỗi nút để chúng không quá đông đúc:
