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以深入了解该主题。