html - CSS:带有一个 且行数固定的目录页面

Question

抱歉，标题中的措辞不明确。我将简要解释一下我的意思。

我正在尝试生成一个目录页面 (A-Z)，它基本上是一个很大的

。但是，我希望它在 25 < li> 之后“折叠”，创建比方说 4 列 25 < li>，然后再低于 4 列，依此类推。

鉴于我有几百个条目，我希望这会自动发生，我不想手动将它们放在 4 列中，每列 25

• 。如果我在中间添加一个
• ，它应该将所有其他条目向下推(而不是获得 26 个列表)。

  例如，列数为 5

  

  添加一个，将所有

• 推得更远。

  

  我希望这种关闭能够说明我正在尝试做的事情。很确定我也可以编写脚本来执行此操作，但我想知道是否有更好的方法。

  提前致谢。

Answer 1

CSS Grid 可以完成大部分工作:

  ul {
  list-style: none;
  display: inline-grid;
  /* or grid depending on your need */
  grid-auto-flow: column;
  grid-template-rows: repeat(5, auto);
  background: lightblue;
  margin: 0;
  padding: 0;
}

li {
  padding: .25em;
  border: 1px solid grey;
   }

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
  <li>Item 16</li>
  <li>Item 17</li>
  <li>Item 18</li>
  <li>Item 19</li>
  <li>Item 20</li>
  <li>Item 21</li>
  <li>Item 22</li>

</ul>

但是，我认为没有 CSS 属性允许列表“换行/折叠”到第二组垂直行。