html - 有 3 列 4 里

Question

我有一个无序列表 (ul)，我正在尝试制作 3 列。当我有 4 个 li's 时，它只显示 2 列。我怎样才能让它有 3 列和 4 个 li ？

此外，我希望 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

Answer 1

li {
    width: calc(100%/3);
    float: left;
    background-color: yellow;
}

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

类似于 this ？