如何使用列中的元素水平设置<ul>样式？</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

Answer 2

是。您可以在li元素上使用内联块，并使其宽度为ul的某个百分比。请查看下面的codepen以获取示例。

http://codepen.io/anon/pen/eCzKD