有没有一种方法可以把列表分解成列？
有没有一种方法可以把列表分解成列？
提问于 2011-06-28 23:38:17
我的网页有一个“瘦”列表:例如，一个包含100个项目的列表，每个项目的长度为一个单词。为了减少滚动，我希望在页面上以两列甚至四列的形式显示此列表。我应该如何在CSS中做到这一点呢？
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
我更喜欢灵活的解决方案，这样如果列表增加到200项，我就不需要做很多手动调整来适应新的列表。
回答 6
Stack Overflow用户
发布于 2011-06-28 23:52:33
如果您正在寻找一种在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;
}您可以向lis添加一个底部边框，以使项从左到右的流动更加明显。
Stack Overflow用户
发布于 2017-09-06 18:28:14
如果你想要一个预设的列数，你可以使用column-count和column- above，如上所述。
但是，如果您想要具有有限高度的单个列，并且在需要时可以拆分成更多列，那么只需将display更改为flex即可。
这在IE9和其他一些旧浏览器上不起作用。您可以在Can I use上查看支持
<style>
ul {
display: -ms-flexbox; /* IE 10 */
display: -webkit-flex; /* Safari 6.1+. iOS 7.1+ */
display: flex;
-webkit-flex-flow: wrap column; /* Safari 6.1+ */
flex-flow: wrap column;
max-height: 150px; /* Limit height to whatever you need */
}
</style>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
Stack Overflow用户
发布于 2020-05-09 22:24:42
2021 -保持简单，使用CSS网格
这些答案很多都过时了，现在是2021年，我们不应该让仍在使用IE9的人使用它。只使用CSS grid要简单得多。
代码非常简单，您可以使用grid-template-columns轻松地调整有多少列。See this，然后尝试使用this fiddle来满足您的需求。
.grid-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
}<ul class="grid-list">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6509106
复制相关文章
相似问题