如何在两列中显示无序列表？
如何在两列中显示无序列表？
提问于 2013-02-07 14:50:57
使用下面的HTML，将列表显示为两列的最简单方法是什么？
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>所需的显示：
A B
C D
E该解决方案需要与Internet Explorer配合使用。
回答 12
Stack Overflow用户
发布于 2014-07-24 11:30:07
我在看@jaider的解决方案，它是有效的，但我提供了一种稍微不同的方法，我认为它更容易使用，而且我已经看到它在不同的浏览器上都很好用。
ul{
list-style-type: disc;
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
list-style-position: inside;//this is important addition
}默认情况下，无序列表在外部显示项目符号位置，但在某些浏览器中，根据浏览器布局网站的方式，它会导致一些显示问题。
要使其以格式显示，请执行以下操作：
A B
C D
E等，请使用以下命令：
ul li{
float: left;
width: 50%;//helps to determine number of columns, for instance 33.3% displays 3 columns
}
ul{
list-style-type: disc;
}这应该可以解决您在显示列方面的所有问题。祝你一切顺利，感谢@jaider，因为你的回复帮助我发现了这一点。
Stack Overflow用户
发布于 2013-02-07 17:58:20
我试着以评论的形式发布这篇文章，但无法让列正确显示(根据您的问题)。
您要求的是：
a.b
C D
E
..。但被接受为解决方案的答案将会返回：
A D
B E
C
..。所以不是答案不正确就是问题不正确。
一个非常简单的解决方案是设置<ul>的宽度，然后像这样浮动并设置<li>项的宽度
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
ul{
width:210px;
}
li{
background:green;
float:left;
height:100px;
margin:0 10px 10px 0;
width:100px;
}
li:nth-child(even){
margin-right:0;
}示例http://jsfiddle.net/Jayx/Qbz9S/1/
如果您的问题是错误的，那么前面的答案仍然适用(使用JS修复缺少IE支持)。
Stack Overflow用户
发布于 2014-06-12 23:44:41
我喜欢现代浏览器的解决方案，但缺少要点，所以我添加了一个小技巧：
http://jsfiddle.net/HP85j/419/
ul {
list-style-type: none;
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
li:before {
content: "• ";
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14745297
复制相关文章
相似问题