CSS中的浮动问题

有关于我们经常做的导航问题。我们如果想用ul>li来做导航的话，我是一般是用到浮动这个属性的。

也就是 float:left; 或者是 display:inline-block; 

下边代码：

 1 <body>
 2         <ul>
 3             <li><a href="#">首页</a></li>
 4             <li><a href="#">首页</a></li>
 5             <li><a href="#">首页</a></li>
 6             <li><a href="#">首页</a></li>
 7             <li><a href="#">首页</a></li>
 8             <li><a href="#">招聘</a></li>
 9             <li><a href="#">首页</a></li>
10         </ul>    
11 </body>
1 <style>
2 *{margin:0px;padding:0px;}
3 
4 ul{width:362px;height:41px;background:#ffb400;}
5 li{ list-style:none; display:inline-block;line-height:41px;text-align:center;}
6 a{font-size:14px;text-decoration:none;color:#000;display:block;width:51px;height:41px;}
7 a:hover{color:#fff;background:#000;padding:0;}
8 
9 </style>

 

这里的display:inline-block可以等价于float:left;

　　

posted @ 2016-09-29 15:30  smille2020  阅读(212)  评论(0)  编辑  收藏  举报