html - 3列4里

我有一个无序列表（ul），我正试图创建3列。当我有4个li's时，它只显示2列。如何使它有3列4li's？
另外，我希望li从左到右，而不是从上到下，如下所示：
情况如何：
1 3 5
2 4个
我想要这样：
1 2 3
4 5个
当我有4个li时，如何使它显示3列？我怎么才能让它从左到右显示呢？
以下是我目前掌握的情况：
HTML格式

<ul>
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
</ul>

CSS

ul {
    background-color:yellow;
    -webkit-columns:3;
    -moz-columns:3;
    columns:3;
}

这是JSFiddle

最佳答案

可以通过浮动块级元素并在其上设置宽度100%/3来完成此操作，从而创建三列布局。浏览器将呈现第一行的前三个元素、第二行的下三个元素、第三行的下三个元素等。
HTML格式

<ul>
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
</ul>

CSS

ul
{
    background-color:yellow;
    overflow: hidden;
    margin: 0; padding: 0;
}

ul li
{
    background: red;
    float: left;
    display: inline-block;
    width: calc(100%/3);
    margin: 0; padding: 0;
}

小提琴
https://jsfiddle.net/wfnkLd6m/4/

关于html - 3列4里，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33220203/