2017-05-08

三栏等宽布局

有时候需要实现一行平均分为三个部分，常见的就是导航条。总结如下几种方法实现三栏等宽布局：

宽度33.33% + float:left

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
ul{
    width: 500px;
    background: #ccc;
    overflow: hidden;
}
li{
    list-style: none;
    width: 33.33%;
    float: left;
    background: red;
}

宽度33.33% + display:inline-block + 消除空隙

使用display：inline-block，每个li之间会有间隙，这是由于浏览器把li之间的空白符渲染成空格的原因。可以将和html结构中li之间的空格删除，但是这种方式对代码的可读性不友好，还可以使用负边距或者将父元素的字体大小设置为0这两种方法解决。

/* 负边距的方法 */
ul{
    width: 500px;
    background: #ccc;
}
li{
    list-style: none;
    display: inline-block;
    width: 33.33%;
    margin-right: -8px; /* 根据具体情况调整负边距的大小 */
    background: red;
}
/* 父元素字体大小设置为0的方法 */
ul{
    width: 500px;
    background: #ccc;
    font-size: 0;
}
li{
    list-style: none;
    display: inline-block;
    width: 33.33%;
    background: red;
    font-size: 16px; /* 在子元素上重新设置字体大小 */
}

flex布局

ul{
    width: 500px;
    background: #ccc;
    display: flex;
}
li{
    list-style: none;
    flex: 1;
    background: red;
}

li设置为display:table-cell，宽度设置为一个大于父元素宽度三分之一的数

设置为display:table-cell的元素会作为一个表格单元格显示，当宽度过大时，会自适应

ul{
    width: 500px;
    background: #ccc;
}
li{
    list-style: none;
    display: table-cell;
    width: 300px;
    background: red;
}

本文标题:三栏等宽布局

文章作者:小蕾蕾

发布时间:2017年05月08日 - 14时30分

最后更新:2018年04月28日 - 11时02分

原始链接:http://wanglei-0707.github.io/2017/05/08/三栏等宽布局/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。