Css 有没有办法将列表拆分为列？

我的网页有一个“瘦”列表：例如，一个100个项目的列表，每个项目的长度为一个单词。为了减少滚动，我想在页面上以两列甚至四列的形式显示这个列表。我应该如何使用CSS实现这一点

项目
项目
项目
项目
项目
项目
项目
项目
项目
项目

CSS解决方案是：

浏览器支持正是您所期望的

除Internet Explorer 9或更早版本外，它在“任何地方”都能工作：

请参见：

如果需要IE支持，则必须使用JavaScript，例如：

另一个解决方案是仅针对IE，回退到正常的

float:left

。顺序将是错误的，但至少看起来类似：

请参见：

---

如果你已经在使用它，你可以使用它。

如果你正在寻找一个同样适用于IE的解决方案，你可以将列表元素浮动到左边。但是，这将产生一个蛇形列表，如下所示：

item 1 | item 2 | item 3
item 4 | item 5

而不是整齐的列，例如：

item 1 | item 4
item 2 | 
item 3 | 

这样做的准则是：

ul li {
  width:10em;
  float:left;
}

您可以在

li

s中添加一个边框底部，以使项目从左到右的流动更加明显。

我发现（目前）Chrome（

Version 52.0.2743.116 m

）在css

列计数方面存在大量关于溢出项目和项目内绝对定位元素的怪癖和问题，特别是在某些维度的转换中

这是一团乱麻，无法修复，所以我尝试通过简单的javascript解决这个问题，并创建了一个库，它可以做到这一点-

如果需要预设列数，可以使用列计数和列间距，如上所述

然而，如果您想要一个高度有限的单列，在需要时可以分成更多的列，只需将display更改为flex即可实现

这在IE9和其他一些旧浏览器上不起作用。您可以在上查看支持



保险商实验室{
显示：-ms flexbox；/*IE 10*/
显示：-webkit flex；/*Safari 6.1+.iOS 7.1+*/
显示器：flex；
-webkit flex flow:包装列；/*Safari 6.1+*/
柔性流：包裹柱；
最大高度：150px；/*根据需要限制高度*/
}

项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
这个答案不一定要按比例缩放，只需要随着列表的增长而进行轻微调整。从语义上讲，它可能看起来有点违反直觉，因为它是两个列表，但除此之外，它在任何浏览器中的外观都是你想要的


ul{
浮动：左；
}
ul>li{
宽度：6em；
}


项目1
项目2
项目3


项目4
项目5
项目6
如果您能够支持，CSS网格可能是将一维列表制作成具有响应性内部的两列布局的最干净的方法


ul{
最大宽度：400px；
显示：网格；
网格模板列：50%50%；
左侧填充：0；
边框：1px纯蓝色；
}
李{
列表样式：内部；
边框：1px红色虚线；
填充：10px；
}

一,
二,
三,
四,
五,
六,
七,
八,
九,
第一种方法是使用手机为较小的屏幕创建体验，然后使用手机在每个版面定义的断点处增加列数


ul{
列数：2；
柱间距：2rem；
}
@媒体屏幕和屏幕（最小宽度：768px））{
保险商实验室{
列数：3；
柱间距：5雷姆；
}
}

项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
以下是我所做的


ul{
显示：块；
宽度：100%；
}
ulli{
显示：块；
最小宽度：计算（30%-10px）；
浮动：左；
}
ul li：第n个孩子（2n+1）{
清除：左；
}

一,
二,
三,
四,
五,
六,
七,
八,
九,
0
2021-保持简单，使用CSS网格
很多答案都过时了，现在是2021年，我们不应该让仍在使用IE9的人使用。使用起来更简单

代码非常简单，您可以使用
网格模板列
轻松调整有多少列。然后根据您的需要与您一起玩


.grid列表{
显示：网格；
网格模板列：重复（4，1fr）；
}

项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
是否有办法删除每列第一个
li
上的上边框？这对于固定空间非常有效，但是对于响应性强的设计来说，这就成了一个问题，因为使用display:inline或inline-block时，列不会像使用display:inline或inline-block那样折叠。有趣的事实：IE是唯一一款完全支持此功能而不带前缀的主要桌面浏览器（自IE10以来）。。。哦，具有讽刺意味的是…可能需要更好的跨浏览器支持来包括这个附加属性
列表样式位置：inside
专门解决了@vsync指出的问题。@PrafullaKumarSahu:Try
li{break-inside:avoid；}
：。我不太熟悉CSS列，所以可能有更好的方法。虽然它可能适用于特定数量的项目，但结果是
item 1 | item 4
item 2 | 
item 3 | 

ul li {
  width:10em;
  float:left;
}