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/

Answer 2

可以让它们向左浮动，并每隔 n 项清除它们。这将模拟固定数量的列，并在 IE9+ 和所有其他浏览器中工作

li{
    float: left;
}

li:nth-child(4n+1){ /*replace 4 with the number of columns*/
    clear: left;
}

JSFiddle

Answer 3

旧时尚的方式。

CSS样式：

.ul li { float: left; margin-right: 20px; }

和实施：

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