html - 我可以在 CSS 中更改这些列的顺序吗？

<分区>

我有多个数据列表，由 HTML 中的无序列表组成，我试图让它们显示在 2 列中。

我已经让它们显示为“列”，但我无法让这些列显示我想要的方式。

如果您查看下面的代码片段，您会看到列在 2 列中对齐，但我希望列是连续的，所以 A、B、C、D 在左列，D、E、 F 等在右栏中。

我使用过 Flexbox 并一直在摆弄 flex-direction 但无济于事。有小费吗？我究竟做错了什么？另外，这是一个 Fiddle .

ul {
  display: flex;
  width: 500px;
  align-items: flex-start;
  flex-wrap: wrap;
}
ul li {
  width: 50%;
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
</ul>

我知道这是一件愚蠢而微不足道的事情，但我错过了什么？我也在使用 Sass。

最佳答案

如果不设置元素的高度，这是不可能的，您可能不想这样做。

但是，您可以使用 column-count 设置列数，这将使每列包含大约相同数量的元素。

ul {
  column-count: 2;
  column-gap: 35px;
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
</ul>

关于html - 我可以在 CSS 中更改这些列的顺序吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48503897/

相关文章：

javascript - 如何使我的网页能够仅嵌入 URL？