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

由于内部浮动元素（li），UL崩溃。用溢出清除UL：隐藏在ul.nav上。

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

Answer 2

两件事：

1）基本上开始并给出元素的高度和宽度。在你可能处于CSS开发阶段，百分比只会让你感到困惑。此外，您应该按字母顺序使用您使用的所有css属性;它会给你一些禅我的朋友。

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 3

由于ul.nav的所有子元素都是浮动的，因此ul.nav必须满足于它的高度。由于其高度为零，因此不会呈现背景颜色。您可以使用Firebug确认ul的大小。

Answer 4

只需从float删除ul.nav li，然后将display:inline更改为display:inline-block

Answer 5

因为你的li显示为内联和浮动，这意味着包含ul会从其子项中获取net get height。给ul一个高度或者在ul周围有一个包含元素和一个clear：在ul之后都给出一个背景颜色

Answer 6

这个问题已经多次被问到：“为什么容器不能封装我的浮动物品？”。这是因为css不是一种编程语言，它是一种造型语言。 CSS会流畅地和隐含地做出反应，许多程序员都希望能够给出明确的指示。

我强烈建议您阅读有关在css中浮动的更多信息。 quirksmode有一个很好的page about it。另外，您应阅读w3c spec以更深入地了解该主题。

CSS水平导航栏与背景颜色

6 个答案: