带有背景色的 CSS 水平导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4125691/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Horizontal navigation bar with background color
提问by Jaakko Sepp?l?
Why does this code produce only a white background:
为什么这段代码只产生白色背景：
ul.nav {
width: 30%;
border: 1px solid #999;
margin: 0px auto;
background-color: #00ff7f;
}
ul.nav li {
display: inline;
float: left;
width: 20%;
}
回答by Damien
The UL collapses due to the inner floated elements (the li's). Clear the UL with an overflow: hidden on the ul.nav.
由于内部浮动元素（li 的），UL 会崩溃。用溢出清除 UL：隐藏在 ul.nav 上。
ul.nav
{
width: 30%;
border: 1px solid #999;
margin: 0px auto;
background-color: #00ff7f;
overflow: hidden;
}
回答by serraosays
Two things:
两件事情：
1) Start more basically and give your elements height and width. At the stage of CSS dev you are probably at, percentages will only confuse you. Additionally, you should alphabetize all of the css properties you use; it will give you code some zen my friend.
1）更基本地开始，并为您的元素提供高度和宽度。在您可能处于 CSS 开发阶段，百分比只会让您感到困惑。此外，您应该按字母顺序排列您使用的所有 css 属性；它会给你代码一些禅我的朋友。
2) Lose the display:inline; reference and replace it with display:block;. Display inline will only take up the room it needs, nothing more. In your code, it doesn't need to take up any space because you have only defined the spaces as a percentages. You could read more here: http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
2）丢显示：inline；引用并将其替换为 display:block;。内嵌显示只会占用它需要的空间，仅此而已。在您的代码中，它不需要占用任何空间，因为您仅将空间定义为百分比。你可以在这里阅读更多：http: //www.webdesignfromscratch.com/html-css/css-block-and-inline/
Try this code instead:
试试这个代码：
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*/
}
This will definitely output something tangible you can work back from with percentages as you learn more.
这肯定会输出一些有形的东西，当您了解更多信息时，您可以使用百分比进行处理。
3) For every question someone answers on here for you, try and answer one yourself. It will help you learn more than you imagined. Good luck in coding...
3) 对于有人在这里为您回答的每个问题，请尝试自己回答。它会帮助你学到比你想象的更多的东西。祝你编码顺利...
回答by Douglas
回答by Sotiris
just delete the floatfrom ul.nav liand change the display:inlineto display:inline-block
只需删除floatfrom ul.nav li并将其更改display:inline为display:inline-block
回答by xiffy
because your li is displayed inline and floating, which means that the containing ul does net get height from its children. Either give the ul a height or have a containing element around the ul and a clear: both after the ul and give that a background color
因为你的 li 显示为内联和浮动，这意味着包含的 ul 确实从它的孩子那里获得了高度。要么给 ul 一个高度，要么在 ul 周围有一个包含元素和一个 clear: 在 ul 之后并给它一个背景颜色
回答by zzzzBov
This question has been asked many times and in many ways: "Why isn't the container encapsulating my floated items?". It's because css is not a programming language, it is a styling language. CSS reacts fluidly and implicitly and many programmers expect to need to give explicit instructions.
这个问题以多种方式被问过很多次：“为什么容器没有封装我漂浮的物品？”。这是因为 css 不是一种编程语言，它是一种样式语言。CSS 反应流畅而隐含，许多程序员希望需要给出明确的指令。
I highly recommend you read more about floating in css. quirksmode has a good page about it. Additionally you should read the w3c specto get a deeper understanding on the subject.
我强烈建议你阅读更多关于在 css 中浮动的内容。quirksmode 有一个很好的页面。此外，您应该阅读w3c 规范以更深入地了解该主题。
