如何在列中分解 html 列表，并遵循列方向的字母顺序？

Question

如果我有这样的列表怎么办：

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
  <li>f</li>
  <li>g</li>
  <li>h</li>
  <li>i</li>
</ul>

并且想要这样的渲染：

a | e | i
b | f |
c | g |
d | h |

我的意思是，分成几列但尊重“垂直”字母顺序？此外，柱子的“高度”应与可用空间一样高。所以没有像上面那样固定 4 行。也没有固定高度的容器。

可能吗？我知道我可以使用 Flexbox 来做到这一点，但要固定容器的高度。我也查看了网格规格，但不确定是否有可能。

有什么想法吗？

Answer 1

尝试这样的 CSS 网格：

ul {
  margin: 0;
  padding: 0;
  list-style:none;
  height: 100vh;
  display: grid;
  grid-template-rows: repeat(auto-fit, 1.2em); /* define the heoght of one row here */
  grid-auto-flow: column;
  font-size: 50px;
}

body {
  margin: 0;
}

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
  <li>f</li>
  <li>g</li>
  <li>h</li>
  <li>i</li>
</ul>

Answer 2

您还可以将

column-count

与

column-fill: auto

一起使用。 这样就可以达到不填写的效果了。

ul.example {
  column-count: 3;
  column-rule: 1px solid #dadbe1;
  column-gap: 3.7rem;
  column-fill: auto; /*balance*/
  column-rule-color: #eaeaf1;
  column-width: auto;
  display: inline-block;
  height: 100vh; /*auto*/
  margin: 0;
  padding: 0;
  width: 100%;
}

ul.example li { list-style: none; display: block; position: relative; break-inside: avoid; height: 25vh; }

<ul class="example">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
        <li>e</li>
        <li>f</li>
        <li>g</li>
        <li>h</li>
        <li>i</li>
      </ul>

Answer 3

我希望列表项向下传播（而不是向右）。 这对我有用：

<style>
    .example {
        columns: 3;
        -webkit-columns: 3;
        -moz-columns: 3;
    }
</style>

<ul class="example">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>g</li>
    <li>h</li>
    <li>i</li>
</ul>