div均匀分布代码实例_html/css_WEB-ITnose-HTML Tutorial-php.cn

div均匀分布代码实例_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:38:09

Original

1924 people have browsed it

多个div在同一行以相同间隔分布:

这样的布局效果使用非常的频繁，也就是让多个div在一行分布，并且div于div之间的间隙是一样的，多用在对于产品的展示之用，下面就介绍一下如何实现此中布局，代码实例如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><title>div均匀分布代码实例</title> <style type="text/css"> *{  margin:0px;  padding:0px;}#box{  width:430px;  height:200px;  background-color:red;  overflow:hidden;  margin:100px;}#box ul{  width:440px;}#box ul li{  width:100px;  height:100px;  background-color:green;  float:left;  margin-right:10px;  list-style:none;}</style>  </head> <body> <div id="box">  <ul>    <li><a href="http://www.100sucai.com/web/wangyezhizuo/fanhuidingbu" title="返回顶部">返回顶部</a></li>  <li><a href="http://www.100sucai.com/web/wangyezhizuo/tucengdaima" title="图层代码">图层代码</a></li>  <li><a href="http://www.100sucai.com/web/wangyezhizuo/gundongdaima" title="滚动代码">滚动代码</a></li>  <li><a href="http://www.100sucai.com/web/jquerytexiao/huandengpian" title="幻灯片">幻灯片</a></li>  </ul></div></body> </html>

Copy after login

以上代码实现了我们的要求，li元素能够均匀的分布在div中，并且中间的间隔是相同的。
原理非常的简单，就是让li左浮动，然后设置margin-right属性值，也就是li元素之间的间隔，并且div元素具有overflow:hidden属性，这样超出margin-right部分恰好被隐藏，这样就实现了右端没有空白的效果。