多个列列表来自一个<ul>，CSS和一些JS </ul>

Question

查看我的HTML代码（让我们说我以这种方式拥有100个链接）：

＆lt; - language：lang-html - ＆gt;

<ul>
    <li><a href="/link.html">Link1</a></li>
    <li><a href="/link.html">Link2</a></li>
    <li><a href="/link.html">Link3</a></li>
    <li><a href="/link.html">Link4</a></li>
    <li><a href="/link.html">Link5</a></li>
    <li><a href="/link.html">Link6</a></li>
    <li><a href="/link.html">Link7</a></li>
    <li><a href="/link.html">Link8</a></li>
    <li><a href="/link.html">Link9</a></li>
    <li><a href="/link.html">Link10</a></li>
</ul>

如你所见，其中一个<ul>内有很多<li>。

我希望在页面（5列）上看起来像这样：

Link1  Link3  Link5  Link7  Link9
Link2  Link4  Link6  Link8  Link10

这个网址有类似的解释： http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/ 然而它导致链接的位置不同，而不是列表向下，它转到右边，所以链接最终看起来像这样：

Link1  Link2  Link3  Link4  Link5
Link6  Link7  Link8  Link9  Link10

我没有在网站上使用任何JavaScript框架，所以我希望只使用CSS和一些独立于框架的JavaScript来完成。 对此有何解决方案？

Answer 1

column-count属性

要获得您所追求的效果，您可以使用column-count: <number>：

  

列数CSS属性描述了列的数量   元件。

     

<number>是一个描述理想数字的严格正整数   将要流入元素内容的列。如果   列宽也设置为非自动值，它只是表示   允许的最大列数。

列的显示方式是高度可自定义的，您还可以使用以下方式配置列属性：column-width，column-gap，column-rule，column-rule-width，column-rule-style，{ {1}}，column-rule-color，column-span，column-fill（见上文链接的MDN文章）

演示

＆＃13;

＆＃13;

columns

＆＃13;

ul {
  -webkit-column-count: 5;
  column-count: 5;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用 flex-wrap 怎么样？

ul{
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
}

li{
    width: 20%;
}