使用css实现等宽列

最新推荐文章于 2024-07-01 18:21:52 发布

liguo9860

最新推荐文章于 2024-07-01 18:21:52 发布

阅读量6.2k

点赞数

分类专栏： HTML CSS

本文链接：https://blog.csdn.net/liguo9860/article/details/51803293

版权

本文介绍了如何使用CSS实现等宽列布局，包括基于float的方法和基于表格布局的自动、手动及固定布局方案，提供了相应的css样式代码，并提供Demo供下载参考。

摘要由CSDN通过智能技术生成

基于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等。

基