CSS列表項寬度/高度不起作用

我試圖製作一個導航內嵌列表。你可以在這裏找到它：http://www.luukratief-design.nl/dump/parallax/para.html CSS列表項寬度/高度不起作用

由於某些原因，它不顯示LI的寬度和高度。這是片段。這有什麼問題？

.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; 
}

來源

2010-02-19 Luuk

聲明a元件作爲display: inline-block和從li元素拖放的寬度和高度。

或者，將float: left應用於li元素，並在a元素上使用display: block。這是更多的跨瀏覽器兼容，因爲display: inline-block不支持在Firefox < = 2例如。

第一種方法允許你如果你給ul元件的100％的寬度（使得它跨越從左至右的邊緣），然後應用text-align: center有一個動態居中列表。使用line-height來控制元素內文字的Y位置。

來源

2010-02-19 09:51:29

非常感謝你！幫助我很多 – Luuk 2010-02-19 09:56:51

我認爲問題是，你試圖設置寬度爲一個內聯元素，我不知道是可能的。一般來說，李是封鎖，這將工作。

來源

2010-02-19 09:51:36 anthares

在內聯元素上使用寬度/高度並不總是一個好主意。您可以使用display: inline-block代替

來源

2010-02-19 09:51:51

內聯項目不能有寬度。您必須使用display: block或display:inline-block，但後者在任何地方都不受支持。

來源

2010-02-19 09:52:04 Ikke

從.navcontainer-top li樣式中刪除<br>。

來源

2010-02-19 09:52:47 Paolo

我有一個類似的問題，試圖修復項目大小，以適應背景圖像的寬度。這工作（至少與Firefox 35）對我來說：

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

來源

2015-02-15 21:47:45

CSS列表項寬度/高度不起作用

回答

相關問題