css - 将一长串 <li> 标签分成几列？

Question

我有大约 30 个 <li> 的列表在<ul> .有什么方法可以使用 CSS 将它们分成三列，每列十列吗？

Answer 1

在 CSS3 中这是 possible .

#columns {
  -moz-column-count: 3;
  -moz-column-gap: 20px;
  -webkit-column-count: 3;
  -webkit-column-gap: 20px;
  column-count: 3;
  column-gap: 20px;
}

HTML:

<div id="columns">
  <ul>
... lots of lis ...
  </ul>
</div>

当列表项超出容器的高度时，它们将溢出到下一列。

也许对于较旧的浏览器，您可以使用 JavaScript，因为这似乎比关键功能更美观。