基于float布局
css样式:
.layout1 li
{
float:left;
border:0;
width:25%;
}
html:
<ul class="layout1">
<li>first cell...</li>
<li>secondcell</li>
<li>third cell.</li>
<li>the fourth cell</li>
</ul>
使用float实现等宽列时,ul元素的高度为0,因为float是使用悬浮的方式实现停靠,不占用布局空间,所以需要加上以下样式,清除浮动。
.layout1:after
{
content:' ';
display:block;
clear:both;
}
页面的宽度为100%,而li的宽度25%,那么4个li的宽度就是100%,也就是把页面 的宽度已经完全撑起来了,如果再给li加一个边框,就会造成元素挤压,把最后一个li给挤到下面一行去了。所以使用float时一定要注意这一点。规避其它会增加宽度的样式,比如border margin-left margin-right等。
基