Html 有没有办法使用多列布局强制每列一个列表项？

我有一些简单的HTML和CSS来将列表拆分为4列。我想强制它将每个列表项放入自己的列中，而不是将每个列表项放入有足够空间的列中

因此，在我的示例中，

列1

将始终仅位于第1列<代码>

第2列
第2列
第2列
第2列

将始终仅位于第2列。与第3列和第4列相同

在使用

columns

属性时，有没有办法做到这一点

ul.data-points{
栏目：4个；
柱间距：20px；
}

第1栏
第2列
第2列
第2列
第2列
第3栏
第4栏

这更适合CSS网格：

ul.data-points{
显示：网格；
网格自动流：列；
柱间距：20px；
}

第1栏
第2列
第2列
第2列
第2列
第3栏
第4栏

正如几个小时前回答的那样。在

将li设置为“内联块”，以避免它喷射到列中，并设置底部填充或边距，以便将下一列推到下一列

但是，它看起来像一个典型的网格或flex布局，而不是CSS列。 下面的演示演示了css列在这里的效率有多低。

ul.data-points{
栏目：4个；
柱间距：20px；
}
li{显示：内联块；宽度：100%；边距底部：100%；}

第1栏
第2列
第2列
第2列
第2列
第3栏
第4栏

它在我这边没有内联块的情况下工作。对于内联块，它是加扰的（在Chrome上测试）@Temaniaff如果边距底部使它在ff中的itsel上工作，内联块是为了避免突破列。css中断规则在列中不起作用；）。。。chrome没有处理边距技巧：（但是这是一个flex或grid作业；）删除内联块使其在测试时在所有浏览器中都能工作（不确定不同的操作系统，在Windows上测试）。这只显示为2列layout@Gavin，因为您运行的是Chrome，所以这个答案是为了证明列CSS不是可以使用的选项，这是网格或flex布局，而不是CSS列小心。为什么不简单地使用flexbox？@ZohirSalak，因为为了在flexbox中的等宽列之间具有相等的间距，您需要在单元格上设置x边距，然后在flex容器上设置负边距，以便在保持列宽度不变的同时删除最左侧和最右侧的边距。这让我觉得有点黑客味，所以如果列表列可以让每列有一个列表项，那么让列的宽度和间距相等会更干净。如果你想在列之间留出空间，你可以在子列上使用边距，就像你使用

列间距：20px它将给出完全相同的布局，只是更好，这里有一个@ZohirSalak，谢谢这个例子！很明显，我对flexbox的了解还不够，因为它很好用，而且很简单。。。