css - 有没有办法将列表分成几列？

Question

我的网页有一个“瘦”列表:例如，一个包含 100 个元素的列表，每个元素的长度为一个单词。为了减少滚动，我想在页面上以两列甚至四列的形式显示此列表。我应该如何使用 CSS 做到这一点？

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

我更喜欢灵活的解决方案，这样如果列表增加到 200 个元素，我就不必进行大量手动调整来适应新列表。

Answer 1

CSS 解决方案是:http://www.w3.org/TR/css3-multicol/

浏览器支持正是您所期望的..

除 Internet Explorer 9 或更早版本外，它“无处不在”:http://caniuse.com/multicolumn

ul {
    -moz-column-count: 4;
    -moz-column-gap: 20px;
    -webkit-column-count: 4;
    -webkit-column-gap: 20px;
    column-count: 4;
    column-gap: 20px;
}

参见: http://jsfiddle.net/pdExf/

如果需要 IE 支持，则必须使用 JavaScript，例如:

http://welcome.totheinter.net/columnizer-jquery-plugin/

另一种解决方案是为 仅 IE 退回到正常的 float: left。顺序会错，但至少看起来很相似:

参见: http://jsfiddle.net/NJ4Hw/

<!--[if lt IE 10]>
<style>
li {
    width: 25%;
    float: left
}
</style>
<![endif]-->

您可以使用 Modernizr 应用回退如果您已经在使用它。