html - 在更多列中显示 UL 元素

Question

是否有可能以某种方式实现在多个列中显示来自一个 UL 的 LI 标签？

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

我现在可以使用嵌套的 ul 标签获取它，但如果可能的话那就太好了!即使某些 li 标签将用于分隔列，但我不知道如何设置样式。

Answer 1

在您的 UL 周围添加一个包装器并使用新的 CSS3“列”:

<div class="columns">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</div>

然后使用 CSS 样式:

.columns {
 -moz-column-count: 3;
 -moz-column-gap: 1em;
 -webkit-column-count: 3;
 -webkit-column-gap: 1em;
}

这是一个 jsFiddle:http://jsfiddle.net/NEHwE/