CSS 有没有办法将列表分成几列？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6509106/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a way to break a list into columns?
提问by user776676
My webpage has a 'skinny' list: for example, a list of 100 items of one word in length each. To reduce scrolling, I want to present this list in two or even four columns on the page. How should I do this with CSS?
我的网页有一个“瘦”列表：例如，一个包含 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>I prefer the solution to be flexible so that if the list grows to 200 items, I don't have to do a lot of manual adjustments to accommodate the new list.
我更喜欢灵活的解决方案，这样如果列表增长到 200 项，我就不必进行大量手动调整来适应新列表。
回答by thirtydot
The CSS solution is: http://www.w3.org/TR/css3-multicol/
CSS 解决方案是：http: //www.w3.org/TR/css3-multicol/
The browser support is exactly what you'd expect..
浏览器支持正是您所期望的。
It works "everywhere" except Internet Explorer 9 or older: http://caniuse.com/multicolumn
除了 Internet Explorer 9 或更旧版本外，它“无处不在”：http: //caniuse.com/multicolumn
ul {
-moz-column-count: 4;
-moz-column-gap: 20px;
-webkit-column-count: 4;
-webkit-column-gap: 20px;
column-count: 4;
column-gap: 20px;
}
See:http://jsfiddle.net/pdExf/
见：http : //jsfiddle.net/pdExf/
If IE support is required, you'll have to use JavaScript, for example:
如果需要 IE 支持，则必须使用 JavaScript，例如：
http://welcome.totheinter.net/columnizer-jquery-plugin/
http://welcome.totheinter.net/columnizer-jquery-plugin/
Another solution is to fallback to normal float: leftfor only IE. The order will be wrong, but at least it will look similar:
另一个解决方案是回退到正常float: left为仅IE。顺序是错误的，但至少看起来是相似的：
See:http://jsfiddle.net/NJ4Hw/
见：http : //jsfiddle.net/NJ4Hw/
<!--[if lt IE 10]>
<style>
li {
width: 25%;
float: left
}
</style>
<![endif]-->
You could apply that fallback with Modernizrif you're already using it.
如果您已经在使用Modernizr，则可以应用该回退。
回答by Matt Hampel
If you are looking for a solution that works in IE as well, you could float the list elements to the left. However, this will result in a list that snakes around, like this:
如果您正在寻找也适用于 IE 的解决方案，您可以将列表元素向左浮动。但是，这将导致一个蜿蜒曲折的列表，如下所示：
item 1 | item 2 | item 3
item 4 | item 5
Instead of neat columns, like:
而不是整齐的列，例如：
item 1 | item 4
item 2 |
item 3 |
The code to do that would be:
这样做的代码是：
ul li {
width:10em;
float:left;
}
You could add a border-bottom to the lis to make the flow of the items from left to right more apparent.
您可以为lis添加一个 border-bottom 以使项目从左到右的流动更加明显。
回答by Maciej Poleski
If you want a preset number of columns, you can use column-count and column-gap, as mentioned above.
如果你想要预设的列数，你可以使用 column-count 和 column-gap，如上所述。
However, if you want a single column with limited height that would break into more columns if needed, this can be achieved quite simply by changing display to flex.
然而，如果你想要一个高度有限的单列，如果需要的话可以分成更多的列，这可以通过将 display 更改为 flex 来实现。
This will not work on IE9 and some other old browsers. You can check support on Can I use
这不适用于 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>回答by Alan Hape
This answer doesn't necessarily scalebut only requires minor adjustments as the list grows. Semantically it might seem a little counter-intuitive since it is twolists, but aside from that it'll look the way you want in any browser ever made.
这个答案不一定会扩展，但只需要随着列表的增长进行微小的调整。从语义上讲，它可能看起来有点违反直觉，因为它是两个列表，但除此之外，它在任何浏览器中看起来都是您想要的。
ul {
float: left;
}
ul > li {
width: 6em;
}<!-- Column 1 -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<!-- Column 2 -->
<ul>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>回答by vsync
I've found that (currently) Chrome (Version 52.0.2743.116 m) has tons of quirks and issues with css column-countregarding overflow items and absolute positioned elements inside items, especially with some dimensions transitions..
我发现（目前）Chrome ( Version 52.0.2743.116 m) 有大量column-count关于溢出项目和项目内绝对定位元素的css 怪癖和问题，尤其是在某些尺寸转换时..
it's a total mess and cannot be fix, so I tried tackling this through simple javascript, and had created a library which does that - https://github.com/yairEO/listBreaker
这是一团糟，无法修复，所以我尝试通过简单的 javascript 解决这个问题，并创建了一个库来做到这一点 - https://github.com/yairEO/listBreaker
Demo page
演示页面
回答by maxshuty
2020 - keep it simple, use CSS Grid
2020 - 保持简单，使用 CSS Grid
Lots of these answers are outdated, it's 2020 and we shouldn't be enabling people who are still using IE9. It's way more simple to just use CSS grid.
很多这些答案已经过时了，现在是 2020 年，我们不应该为仍在使用 IE9 的人提供支持。使用CSS grid更简单。
The code is very simple, and you can easily adjust how many columns there are using the grid-template-columns. See thisand then play around with this fiddleto fit your needs.
代码非常简单，您可以使用grid-template-columns. 看到这个，然后用这个小提琴来满足你的需要。
.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>回答by mattLummus
If you can support it CSS Grid is probably the cleanest way for making a one-dimensional list into a two column layout with responsive interiors.
如果您可以支持它，CSS Grid 可能是将一维列表制作成具有响应式内部结构的两列布局的最简洁方法。
ul {
max-width: 400px;
display: grid;
grid-template-columns: 50% 50%;
padding-left: 0;
border: 1px solid blue;
}
li {
list-style: inside;
border: 1px dashed red;
padding: 10px;
}<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<ul>These are the two key lines which will give you your 2 column layout
这些是两条关键线，它们将为您提供 2 列布局
display: grid;
grid-template-columns: 50% 50%;
回答by Josh Habdas
The mobile-first way is to use CSS Columnsto create an experience for smaller screens thenuse Media Queriesto increase the number of columns at each of your layout's defined breakpoints.
移动优先的方法是使用CSS Columns为较小的屏幕创建体验，然后使用Media Queries来增加每个布局定义断点处的列数。
ul {
column-count: 2;
column-gap: 2rem;
}
@media screen and (min-width: 768px)) {
ul {
column-count: 3;
column-gap: 5rem;
}
}<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>回答by GuruKay
Here is what I did
这是我所做的
ul {
display: block;
width: 100%;
}
ul li{
display: block;
min-width: calc(30% - 10px);
float: left;
}
ul li:nth-child(2n + 1){
clear: left;
}<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>0</li>
</ul>