CSS 将 <li> 标签的长列表分成列？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/486349/
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
Dividing long list of <li> tags into columns?
提问by core
I've got a list of about 30 <li>in a <ul>. Is there any way, using CSS, to divide these into three columns of ten?
我有大约30名单<li>中<ul>。有什么办法可以使用 CSS 将它们分成三列，每列十个？
回答by Zach
In CSS3 this is possible.
在 CSS3 中这是可能的。
#columns {
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
column-count: 3;
column-gap: 20px;
}
HTML:
HTML：
<div id="columns">
<ul>
... lots of lis ...
</ul>
</div>
The list items will spill over into the next column as they exceed the height of the container.
当列表项超过容器的高度时，它们将溢出到下一列。
Perhaps for older browser you could use JavaScript, as this seems to be more aesthetic than a critical feature.
也许对于较旧的浏览器，您可以使用 JavaScript，因为这似乎比关键功能更美观。
回答by willoller
I usually set the widths at 28% and float the to the left:
我通常将宽度设置为 28% 并将其浮动到左侧：
ul li {
width: 28%;
margin: .5em 2%;
float:left;
}
The downside to this is that items fill like:
这样做的缺点是项目填充如下：
- - -
- - -
-
Not like:
不喜欢：
- - -
- -
- -
If you want vertical filled columns, you need 3 <ul>s.
如果您想要垂直填充的列，则需要 3 <ul> 秒。
回答by andyk
there is a good article about multi column lists in Alistapart. Might be helpful.
在Alistapart 中有一篇关于多列列表的好文章。可能会有所帮助。
回答by jamiestroud69
The following is tailored to be mobile friendly.
以下内容专为移动友好而量身定制。
div.a {
background-color: #ffffff;
border: 2px solid;
margin: 0;
overflow: auto;
padding: 1%;
text-align: left;
word-wrap: break-word;
}
ul.a {
list-style-type: none;
margin: 0;
padding: 0;
}
li.spacea {
float: left;
width: 2%;
}
li.thirda {
color: #ff00ff;
float: left;
width: 32%;
}
li.thirdb {
color: #ffff00;
float: left;
width: 32%;
}
li.thirdc {
color: #00ffff;
float: left;
width: 32%;
}<div class="a">
<ul class="a">
<li class="thirda">
The quick brown fox jumped over the lazy dog.
</li>
<li class="spacea">
</li>
<li class="thirdb">
The quick brown fox jumped over the lazy dog.
</li>
<li class="spacea">
</li>
<li class="thirdc">
The quick brown fox jumped over the lazy dog.
</li>
</ul>
</div>