带背景色的 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 属性；它会给你一些代码，我的 friend 。

2) 丢掉display:inline;引用并将其替换为显示: 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) 对于这里有人为您回答的每个问题，请尝试自己回答一个。它会帮助你学到比你想象的更多的东西。祝你编码顺利......