我才12岁 ?

今天修bug的时候，看明城的代码，发现了一个小技巧，可能大家都知道，还是分享给其他不知道的。^_^

大家在使用浮动的时候，往往会设置margin-left或者margin-right分隔他们，然而如果要均匀分布，总会有一个多余的元素多出一些margin。之前经常用的方法就是设置margin-left，然后给外围元素设置margin-left为负。如下：

HTML Code：

<div class="outer">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

CSS Code：

body,ul,li { margin:0; padding:0;}
ul,li { list-style-type:none;}
.outer { width:200px; border:1px solid #ccc; margin:100px; overflow:hidden;}
li { float:left; width:60px; height:20px; display:inline; margin-left:10px; margin-bottom:10px; background-color:#0CC;}
ul { margin-left:-10px; overflow:hidden; zoom:1;}

现在说的第二种方法，是设置margin-right，然后设置ul的宽度，让它的宽度大于等于应设浮动个数的宽度以及间隔之和，而小于多于一个元素的宽度和间隔之和。这样子就可以达到我们的目的了，如下：

CSS Code：

li { float:left; width:60px; height:20px; display:inline; margin-right:10px; margin-bottom:10px; background-color:#0CC;}
ul { overflow:hidden; zoom:1; width:210px;}

标签： float

这篇文章发布于 2009年03月2日，星期一，20:37，归类于 编码。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。