【问题标题】：Is there a way to force one List Item per column using multi-column layout?有没有办法使用多列布局强制每列一个列表项？
【发布时间】：2020-03-23 03:03:43
【问题描述】：

我有一些简单的 HTML 和 CSS 将列表分成 4 列。与将每个列表项放入有足够空间的列中的正常行为不同，我想强制它将每个列表项放入自己的列中。

所以在我的示例中，<li>Column 1</li> 将始终仅位于第一列。 <li>Column 2<br>Column 2<br>Column 2<br>Column 2</li> 将始终仅位于第二列。与第 3 列和第 4 列相同。

有没有办法在使用columns 属性时完成此操作？

ul.data-points {
  columns: 4;
  column-gap: 20px;
}

<ul class="data-points">
  <li>Column 1</li>
  <li>Column 2<br>Column 2<br>Column 2<br>Column 2</li>
  <li>Column 3</li>
  <li>Column 4</li>
</ul>

【问题讨论】：

为什么不直接使用 flexbox 呢？
@ZohirSalak 因为为了让 flexbox 中等宽列之间的间距相等，您需要在单元格上设置 x 边距，然后在 flex 容器上设置负边距，以便移除最左边和最右边的边距，同时保持列的宽度相同。对我来说，这感觉有点骇人听闻，所以如果可以将列表列设置为每列有 1 个列表项，那么在它们之间设置等宽列和等宽间距将是一种更简洁的方法。
如果你想在两者之间留出空间，你可以在孩子身上使用边距，就像你使用column-gap: 20px;一样，它只会更好地给出完全相同的布局，这里是demo
@ZohirSalak 感谢这个例子！我显然对 flexbox 了解不够，因为它很好用，而且很简单......

标签： html css css-multicolumn-layout

【解决方案1】：

这个更适合CSS网格：

ul.data-points {
  display:grid;
  grid-auto-flow:column;
  column-gap: 20px;
}

<ul class="data-points">
  <li>Column 1</li>
  <li>Column 2<br>Column 2<br>Column 2<br>Column 2</li>
  <li>Column 3</li>
  <li>Column 4</li>
</ul>

【讨论】：

【解决方案2】：

正如几个小时前回答的那样。在2 column lists gets separated by its heading

将 li 设置为 inline-block 以避免它穿过列和底部填充或边距以希望将下一个推到下一个列。

但是，它看起来像典型的网格或弹性布局，而不是 CSS 列。

下面的演示演示了这里的 css 列效率如何。

ul.data-points {
  columns: 4;
  column-gap: 20px;
}
li {display:inline-block;width:100%;margin-bottom:100%;}

<ul class="data-points">
  <li>Column 1</li>
  <li>Column 2<br>Column 2<br>Column 2<br>Column 2</li>
  <li>Column 3</li>
  <li>Column 4</li>
</ul>

【讨论】：

它在我这边没有内联块的情况下工作。用 inline-block 打乱了（在 Chrome 上测试）
@TemaniAfif margin-bottom 使其在 ff 中的其自身上工作，inline-block 是为了避免通过 columns 打破 li 。 css 中断规则永远不会在列内起作用 ;) ... chrome 不能处理边距技巧 :( 但它是一个 flex 或网格作业 ;)
移除 inline-block 使其在测试时适用于所有浏览器（不确定不同的操作系统，在 Windows 上测试）
这仅显示为 2 列布局
@Gavin ，因为你运行的是 Chrome，所以这个答案是为了证明 CSS 列不是使用的选项，这是一个网格或 flex 布局，不是 CSS 列关心。