javascript - 来自一个 、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属性(property)

要得到你想要的效果，你可以使用 column-count: <number> :

The column-count CSS property describes the number of columns of the element.

<number> Is a strictly positive integer describing the ideal number of columns into which the content of the element will be flowed. If the column-width is also set to a non-auto value, it merely indicates the maximum allowed number of columns.

列的显示方式是高度可定制的，您还可以使用以下方式配置列属性: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>