有没有一种方法可以将列表分成几列？

小编典典

有没有一种方法可以将列表分成几列？

css

我的网页上有一个“瘦”列表：例如，一个包含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个项目，则无需进行很多手动调整即可容纳新列表。

阅读 283

2020-05-16

共1个答案

小编典典

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

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

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

如果已经使用过后退，可以将它与Modernizr一起使用。

2020-05-16