CSS - 在移动到下一列之前，如何设置 UL 列表中 LI 的数量限制

Question

如果我的网站在 UL 中列出了无穷无尽的选项，那么我如何强制将其限制为 10，然后才应移至下一栏 enter image description here

Answer 1

假设您的列表是

<ul>
  <li>item #1</li>
  <li>item #2</li>
  <li>item #3</li>
  ...
  <li>item #22</li>
  <li>item #23</li>
</ul>

您可以通过设置列方向和10%的flex-basis来使用Flexbox(因此每个list-item 在转移到新列之前占用可用高度的 1/10)，这作为限制

ul { 
  margin: 0;
  width: 100%;
  height: 200px;
  list-style: none; 
  display: flex; 
  justify-content: flex-start;
  flex-direction: column;
  align-content: flex-start;
  flex-wrap: wrap; }

li { 
  flex-basis: 10%;
  width: 25%;
}

Codepen demo