网页设置导航条

1  /*list-style:none;是清除ul标签自带的样式，不设置高度height是因为可以靠li来撑开*/
2 ul{list-style:none;width:100px;}
3  /*text-decoration:none;清除a标签的下划线；display:block;将a标签变成块元素，这样才能给a标签设置宽高和背景*/
4  a{text-decoration:none;display:block;}
5  /*line-height:30px;是保证文字垂直居中；text-align:center;是保证文字水平居中，宽度width可以继承父类的*/
6  li{height:30px;line-height:30px;text-align:center;}

1  ul{list-style:none;width:100px;}
2  /*在将a标签变为块元素后，可以直接把li标签的属性都复制过来，直接对a标签使用*/
3  a{text-decoration:none;display:block;height:30px;line-height:30px;text-align:center;}

1 /*去掉ul的宽度，不然不会水平排列*/
2 ul{list-style:none;}
3 li{float:left;}
4 a{text-decoration:none;display:block;height:30px;line-height:30px;text-align:center;}

1 ul{list-style:none;}
2 li{display:inline-block;}
3 a{text-decoration:none;display:block;height:30px;line-height:30px;text-align:center;}

 ul{
 height:30px;        
 list-style: none;
 }
 li{    
 width: 30%;/*这个数字可以自己根据导航内容个数设置*/
 box-sizing:border-box;
 -moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
 float:left;
 }
a{
text-decoration:none;
display:block;
line-height:30px;
text-align:center;
 }