使用下面的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兼容。
使用下面的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兼容。
当前回答
您可以使用CSS只设置两个或更多列
一个E B 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;
}
其他回答
我试着把这作为评论发布,但不能让列显示正确(根据你的问题)。
你需要:
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支持)。
您可以使用CSS只设置两个或更多列
一个E B 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;
}
在updateColumns()中需要if (column >= columns.length)而不是if (column > columns.length)来列出所有元素(例如跳过C),因此:
function updateColumns(){
column = 0;
columnItems.each(function(idx, el){
if (column >= columns.length){
column = 0;
}
console.log(column, el, idx);
$(columns.get(column)).append(el);
column += 1;
});
}
http://jsfiddle.net/e2vH9/1/
假设多列布局可以很好地与居中布局,证明网格布局与水平间隙。
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>
这是最简单的方法。CSS。
为ul元素添加width。 添加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>