Question

我有无数个无序列表，我想在三列中显示它们。一个表是一种方法，我得到了它的工作，但我正在考虑可能有一种CSS方式这样做。

每个列表中的项目数也与列表不同，也是未知的。我想建议对此进行标记。是一个表格可以去这里，还是有更好的CSS解决方案？

谢谢！

Answer 1

更新：

抱歉小调整 - 您需要清除每个UL，我会使用CSS3 nth-child伪选择器清除每个第4个ul。已经更新了JS Fiddle

尝试这样的事情......

CSS：

    #container
{
    width: 600px;
}

#container ul 
{
    width: 200px;
    float: left;
    margin-bottom: 20px;
}

ul:nth-child(4n) {
    clear:left;
}

.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { zoom: 1; }

HTML：

<div id="container">
    <ul class="cf">
    <li>foo</li>
    <li>bar</li>
    <li>bar</li>
            <li>bar</li>
            <li>bar</li>
</ul>
<ul class="cf">
    <li>foo</li>
    <li>bar</li>
</ul>
<ul class="cf">
    <li>foo</li>
    <li>bar</li>
</ul>
<ul class="cf">
    <li>foo</li>
    <li>bar</li>
</ul>
<ul class="cf">
    <li>foo</li>
    <li>bar</li>
</ul>
</div>

这是上面的JSFiddle链接： http://jsfiddle.net/beardtwizzle/9EALs/1/

Answer 2

你可以在CSS中使用div，here你会找到一个实际的例子。

css - 在三列中显示无序列表

2 个答案: