来自一个<ul>,CSS和一些JS的多列列表

Question

看看我的HTML代码(假设我以这种方式拥有100个链接):

< - 语言:lang-html - >

<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

这个URL有类似的解释: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,column-rule-color,column-span,column-fill,columns(见上面链接MDN文章)

演示

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

<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>