在更多列中显示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>