CSS水平導航欄

Question

爲什麼這個代碼只生產一個白色背景：

ul.nav { 
    width: 30%; 
    border: 1px solid #999; 
    margin: 0px auto; 
    background-color: #00ff7f; 
} 
ul.nav li { 
    display: inline; 
    float: left; 
    width: 20%;   
} 

Answer 1

兩件事：

1）更基本的開始，給你的元素的高度和寬度。在你可能在CSS開發階段，百分比只會讓你感到困惑。此外，你應該按字母順序排列你使用的所有CSS屬性;它會給你一些zen我的朋友代碼。

2）失去顯示：內聯;引用並用display：block;替換它。聯機顯示只會佔用它需要的空間，僅此而已。在您的代碼中，它不需要佔用任何空間，因爲您只將空間定義爲百分比。你可以在這裏閱讀更多：http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

試試這個代碼，而不是：

ul.nav { 
    background-color: #00ff7f;  
    border: 1px solid #999; 
    height: 20px; /*This is an example*/ 
    margin: 0px auto; 
    width: 400px;   
} 

ul.nav li { 
    background-color: #86182d; /*Example background color*/ 
    display: block; 
    float: left; 
    height: 20px; /*This is an example*/ 
    width: 80px; /*This is 20% of 400px*/  
} 

這必將輸出有形的東西，你可以從百分比作爲你學習更努力了。

3）對於有人在這裏爲您回答的每個問題，請嘗試自己回答。它會幫助你學習超出你的想象。祝你好運在編碼...

Answer 2

由於所有ul.nav的孩子都是浮動的，在ul.nav具有內容以提供高度。由於其高度爲零，因此不呈現背景顏色。您可以使用Firebug來確認ul的大小。

Answer 3

UL由於內部浮動元素（李氏）而摺疊。用ul.nav隱藏UL：清除UL。

ul.nav 
{ 
    width: 30%; 
    border: 1px solid #999; 
    margin: 0px auto; 
    background-color: #00ff7f; 
    overflow: hidden; 
} 

Answer 4

只是刪除ul.nav li的float和改變display:inline到display:inline-block

Answer 5

，因爲會顯示您的李聯和浮動，這意味着含UL確實來自其子網獲取的高度。或者給ul一個高度或者在ul周圍有一個包含元素，並且明確：在ul之後並且給出背景顏色

Answer 6

這個問題已被多次詢問並以多種方式提出：「爲什麼不是容器封裝我浮動的物品？「。這是因爲css不是一種編程語言，它是一種造型語言。 CSS流暢地和隱含地反應，許多程序員希望需要給出明確的指示。

我強烈建議你閱讀更多關於在CSS中漂浮。 quirksmode有一個很好的page about it。此外，您應該閱讀w3c spec以深入瞭解該主題。