css - 如何使用列中的元素水平设置 <ul> 样式？

Question

考虑这个 HTML:

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
</ul>

我想得到这个结果:

One    Three    Five
Two    Four     Six

或者这个:

One      Four
Two      Five
Three    Six

这可以用 仅 CSS 完成吗？

Answer 1

CSS3 column会实现你正在寻找的东西，fiddle和 MDN link

ul {
  -webkit-column-count: 3;
  -webkit-column-gap: 20px;  
  -moz-column-count: 3;
  -moz-column-gap: 20px;
  column-count: 3;
  column-gap: 20px;
}

如您所见，它仍然需要供应商前缀，但所有主流浏览器都支持 can I use

编辑

避免在 <li> 内部破裂正如@andrew 对他的回答所评论的那样，添加

li {
     -webkit-column-break-inside: avoid;
     -moz-column-break-inside: avoid;
     column-break-inside: avoid;
}

已更新 fiddle