三栏等宽布局

三栏等宽布局

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>

float

ul {
    width: 500px;
    background: #ccc;
    overflow: hidden;
}

li {
    list-style: none;
    width: 33.33%;
    float: left;
    background: red;
}

flex

ul {
    width: 500px;
    background: #ccc;
    display: flex;
}

li {
    list-style: none;
    flex: 1;
    background: red;
}