在三列中显示无序列表

Question

我有未知数量的无序列表，我想将它们显示在三列中。表格是一种方法，我得到了它的工作，但我正在考虑也许有一种 CSS 方法可以做到这一点。

每个列表中的项目数也因列表而异，也是未知的。我想得到有关标记的建议。表格是这里的方式，还是有更好的CSS解决方案？

谢谢！

Answer 1

更新：

抱歉，小调整 - 您需要清除每个 UL，我会使用 CSS3 第 n 个子伪选择器清除每个第 4 个 ul。也更新了JS小提琴

试试这样的事情...

.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

您可以将div 与 CSS 一起使用，在这里您将找到一个实际示例。