Chiều rộng/chiều cao mục danh sách CSS không hoạt động

Question

Tôi đã cố tạo danh sách nội tuyến điều hướng. Bạn có thể tìm thấy nó ở đây: http://www.luukratief-design.nl/dump/parallax/para.html

Vì lý do nào đó, nó không hiển thị chiều rộng và chiều cao của LI. Đây là đoạn trích. Điều gì là sai với điều này?

.navcontainer-top li { 
    font-family: "Verdana", sans-serif; 
    margin: 0; 
    padding: 0; 
    font-size: 1em; 
    text-align: center; 
    display: inline; 
    list-style-type: none;<br> 
    width: 117px; 
    height: 26px; 
} 


.navcontainer-top li a { 
    background: url("../images/nav-button.png") no-repeat; 
    color: #FFFFFF; 
    text-decoration: none; 
    width: 117px; 
    height: 26px; 
    margin-left: 2px; 
    margin-right: 2px; 
} 
.navcontainer-top li a:hover { 
    background: url("../images/nav-button-hover.png") no-repeat; 
    color: #dedede; 
} 

Answer 1

Khai báo các yếu tố a như display: inline-block và thả chiều rộng và chiều cao từ các yếu tố li.

Hoặc, áp dụng float: left vào phần tử li và sử dụng display: block trên phần tử a. Trình duyệt này tương thích hơn một chút, vì display: inline-block không được hỗ trợ trong Firefox < = 2 chẳng hạn.

Phương pháp đầu tiên cho phép bạn có danh sách động ở giữa nếu bạn đặt phần tử ul có chiều rộng 100% (để nó kéo dài từ trái sang phải) và sau đó áp dụng text-align: center.

Sử dụng line-height để kiểm soát vị trí Y của văn bản bên trong phần tử.

Answer 2

Tôi nghĩ vấn đề là, bạn đang cố đặt chiều rộng thành phần tử nội tuyến mà tôi không chắc chắn là có thể. Nói chung Li là khối và điều này sẽ làm việc.

Answer 3

Sử dụng chiều rộng/chiều cao trên các phần tử nội tuyến không phải lúc nào cũng là ý tưởng hay. Bạn có thể sử dụng display: inline-block thay vì

Answer 4

Mục nội tuyến không được có chiều rộng. Bạn phải sử dụng display: block hoặc display:inline-block, nhưng sau này không được hỗ trợ ở mọi nơi.

Answer 5

Xóa <br> khỏi kiểu .navcontainer-top li.

Answer 6

Tôi gặp sự cố tương tự khi cố sửa kích thước mục để vừa với chiều rộng hình nền. Tính năng này hoạt động (ít nhất với Firefox 35) cho tôi:

.navcontainer-top li 
{ 
    display: inline-block; 
    background: url("../images/nav-button.png") no-repeat; 
    width: 117px; 
    height: 26px; 
}