CSS中的浮动问题

时间：2021-05-17 20:19:36

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

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

下边代码：

 <body>

         <ul>

             <li><a href="#">首页</a></li>

             <li><a href="#">首页</a></li>

             <li><a href="#">首页</a></li>

             <li><a href="#">首页</a></li>

             <li><a href="#">首页</a></li>

             <li><a href="#">招聘</a></li>

             <li><a href="#">首页</a></li>

         </ul>

 </body>
 <style>

 *{margin:0px;padding:0px;}

 ul{width:362px;height:41px;background:#ffb400;}

 li{ list-style:none; display:inline-block;line-height:41px;text-align:center;}

 a{font-size:14px;text-decoration:none;color:#000;display:block;width:51px;height:41px;}

 a:hover{color:#fff;background:#000;padding:0;}

 </style>

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

　　

相关文章