one float tip
2009年03月2日 | 分类：CSS | 1 Comment » | 1,188 views
今天修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;}
