使用下面的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兼容。
当前回答
几年后再来一个答案!
本文地址:http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/
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:
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%; }
其他回答
你可以很容易地用jQuery-Columns Plugin来做到这一点，例如，用一个。mylist类来分割一个ul
$('.mylist').cols(2);
下面是jsfiddle的一个实例
我喜欢这个比CSS更好，因为在CSS解决方案中，不是所有东西都垂直对齐到顶部。
我试着把这作为评论发布，但不能让列显示正确(根据你的问题)。
你需要:
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支持)。
假设多列布局可以很好地与居中布局，证明网格布局与水平间隙。
p { text-align: justify; } ul { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-around; gap: 0 3em; text-transform: capitalize; } <p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.</p> <ul> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> <li>six</li> <li>seven</li> <li>eight</li> <li>nine</li> <li>ten</li> </ul> <p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.</p>
几年后再来一个答案!
本文地址:http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/
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:
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%; }
与引导……这个答案(https://stackoverflow.com/a/23005046/1128742)让我想到了这个解决方案:
<ul class="list-unstyled row">
<li class="col-xs-6">Item 1</li>
<li class="col-xs-6">Item 2</li>
<li class="col-xs-6">Item 3</li>
</ul>
http://jsfiddle.net/patrickbad767/472r0ynf/
