Html 如何在两列中显示无序列表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14745297/
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
How to display an unordered list in two columns?
提问by atp03
With the following HTML, what is the easiest method to display the list as two columns?
使用以下 HTML，将列表显示为两列的最简单方法是什么？
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
Desired display:
所需显示：
A B
C D
E
The solution needs to be able work on Internet Explorer.
该解决方案需要能够在 Internet Explorer 上运行。
回答by Gabriel
Modern Browsers
现代浏览器
leverage the css3 columns module to support what you are looking for.
利用 css3 列模块来支持您正在寻找的内容。
http://www.w3schools.com/cssref/css3_pr_columns.asp
http://www.w3schools.com/cssref/css3_pr_columns.asp
CSS:
CSS：
ul {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
Legacy Browsers
旧版浏览器
Unfortunately for IE support you will need a code solution that involves JavaScript and dom manipulation. This means that anytime the contents of the list changes you will need to perform the operation for reordering the list into columns and reprinting. The solution below uses jQuery for brevity.
不幸的是，对于 IE 支持，您将需要一个涉及 JavaScript 和 dom 操作的代码解决方案。这意味着只要列表的内容发生变化，您都需要执行将列表重新排序为列并重新打印的操作。为简洁起见，下面的解决方案使用 jQuery。
HTML:
HTML：
<div>
<ul class="columns" data-columns="2">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
</ul>
</div>
JavaScript:
JavaScript：
(function($){
var initialContainer = $('.columns'),
columnItems = $('.columns li'),
columns = null,
column = 1; // account for initial column
function updateColumns(){
column = 0;
columnItems.each(function(idx, el){
if (idx !== 0 && idx > (columnItems.length / columns.length) + (column * idx)){
column += 1;
}
$(columns.get(column)).append(el);
});
}
function setupColumns(){
columnItems.detach();
while (column++ < initialContainer.data('columns')){
initialContainer.clone().insertBefore(initialContainer);
column++;
}
columns = $('.columns');
}
$(function(){
setupColumns();
updateColumns();
});
})(jQuery);
CSS:
CSS：
.columns{
float: left;
position: relative;
margin-right: 20px;
}
EDIT:
编辑：
As pointed out below this will order the columns as follows:
正如下面所指出的，这将按如下方式对列进行排序：
A E
B F
C G
D
while the OP asked for a variant matching the following:
而 OP 要求匹配以下内容的变体：
A B
C D
E F
G
To accomplish the variant you simply change the code to the following:
要完成变体，您只需将代码更改为以下内容：
function updateColumns(){
column = 0;
columnItems.each(function(idx, el){
if (column > columns.length){
column = 0;
}
$(columns.get(column)).append(el);
column += 1;
});
}
回答by Winnifred
I was looking at @jaider's solution which worked but I'm offering a slightly different approach that I think is more easy to work with and which I've seen to be good across browsers.
我正在查看 @jaider 的解决方案，该解决方案有效，但我提供了一种略有不同的方法，我认为它更易于使用，并且我认为它在浏览器中都很好。
ul{
list-style-type: disc;
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
list-style-position: inside;//this is important addition
}
By default un-ordered list display the bullet position outside but then in some browsers it would cause some display problems based on the browser's way of laying out your website.
默认情况下，无序列表将项目符号位置显示在外面，但在某些浏览器中，根据浏览器布局网站的方式，它会导致一些显示问题。
To get it to display in the format:
要使其以以下格式显示：
A B
C D
E
etc. use the following:
等使用以下内容：
ul li{
float: left;
width: 50%;//helps to determine number of columns, for instance 33.3% displays 3 columns
}
ul{
list-style-type: disc;
}
This should solve all your problems with displaying columns. All the best and thanks @jaider as your response helped to guide me to discover this.
这应该可以解决您显示列的所有问题。祝您一切顺利，感谢@jaider，因为您的回复帮助我发现了这一点。
回答by Jayx
I tried posting this as a comment, but couldn't get the columns to display right (as per your question).
我尝试将此作为评论发布，但无法正确显示列（根据您的问题）。
You are asking for:
您要求：
A B
AB
C D
光盘
E
乙
... but the answer accepted as the solution will return:
...但作为解决方案接受的答案将返回：
A D
广告
B E
是
C
C
... so either the answer is incorrect or the question is.
...所以要么答案不正确，要么问题是。
A very simple solution would be to set the width of your <ul>and then float and set the width of your <li>items like so
一个非常简单的解决方案是设置您的宽度，<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;
}
Example here http://jsfiddle.net/Jayx/Qbz9S/1/
这里的例子http://jsfiddle.net/Jayx/Qbz9S/1/
If your question is wrong, then the previous answers apply (with a JS fix for lacking IE support).
如果您的问题是错误的，则适用先前的答案（针对缺乏 IE 支持的 JS 修复程序）。
回答by Jaider
I like the solution for modern browsers, but the bullets are missing, so I add it a little trick:
我喜欢现代浏览器的解决方案，但缺少子弹，所以我添加了一个小技巧：
http://jsfiddle.net/HP85j/419/
http://jsfiddle.net/HP85j/419/
ul {
list-style-type: none;
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
li:before {
content: "? ";
}
回答by Abdul
Here's a possible solution:
这是一个可能的解决方案：
Snippet:
片段：
ul {
width: 760px;
margin-bottom: 20px;
overflow: hidden;
border-top: 1px solid #ccc;
}
li {
line-height: 1.5em;
border-bottom: 1px solid #ccc;
float: left;
display: inline;
}
#double li {
width: 50%;
}<ul id="double">
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
</ul>And it is done.
For 3 columns use liwidth as 33%, for 4 columns use 25% and so on.
它完成了。
对于 3 列使用li宽度为 33%，对于 4 列使用 25% 等等。
回答by Aviv Shaal
This is the simplest way to do it. CSS only.
这是最简单的方法。仅 CSS。
- add width to the ul element.
- add display:inline-block and width of the new column (should be less than half of the ul width).
- 向 ul 元素添加宽度。
- 添加 display:inline-block 和新列的宽度（应该小于 ul 宽度的一半）。
ul.list {
width: 300px;
}
ul.list li{
display:inline-block;
width: 100px;
}<ul class="list">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>回答by Bouhejba zied
You can use CSS onlyto set two columns or more
您只能使用CSS来设置两列或更多列
A E
B
C
D
AE
乙
C
D
<ul class="columns">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
ul.columns {
-webkit-columns: 60px 2;
-moz-columns: 60px 2;
columns: 60px 2;
-moz-column-fill: auto;
column-fill: auto;
}
回答by maximus ツ
This can be achieved using column-count css property on parent div,
这可以使用父 div 上的 column-count css 属性来实现，
like
喜欢
column-count:2;
check this out for more details.
看看这个了解更多详情。
回答by newUserNameHere
You can do this really easily with the jQuery-Columns Pluginfor example to split a ul with a class of .mylist you would do
您可以使用jQuery-Columns Plugin轻松完成此操作，例如使用 .mylist 类拆分 ul
$('.mylist').cols(2);
Here's a live example on jsfiddle
这是一个关于 jsfiddle 的实例
I like this better than with CSS because with the CSS solution not everything aligns vertically to the top.
我比使用 CSS 更喜欢这个，因为使用 CSS 解决方案并不是所有的东西都垂直对齐到顶部。
回答by user3632930
more one answer after a few years!
几年后又有一个答案！
in this article:http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/
在本文中：http : //csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/
HTML:
HTML：
<ul id="double"> <!-- Alter ID accordingly -->
<li>CSS</li>
<li>XHTML</li>
<li>Semantics</li>
<li>Accessibility</li>
<li>Usability</li>
<li>Web Standards</li>
<li>PHP</li>
<li>Typography</li>
<li>Grids</li>
<li>CSS3</li>
<li>HTML5</li>
<li>UI</li>
</ul>
CSS:
CSS：
ul{
width:760px;
margin-bottom:20px;
overflow:hidden;
border-top:1px solid #ccc;
}
li{
line-height:1.5em;
border-bottom:1px solid #ccc;
float:left;
display:inline;
}
#double li { width:50%;}
#triple li { width:33.333%; }
#quad li { width:25%; }
#six li { width:16.666%; }
