使用下面的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创建一个多列列表。如果需要,样式标记显然可以放入CSS中。
<p>Materials List</p>
<ul style="display: inline-block; float: left">
<u>Item Description<u>
<li>1/2" x 4' wood dowel</li>
<li>1/2" x 12" PVC pipe</li>
<li>1/2" PVC pipe end cap</li>
<li>7/16" x 3" light duty expansion spring</li>
<li>6" plastic zip ties</li>
<li>Light weight antenna</li>
</ul>
<div style="display: inline-block; margin-left: 1em">
<u>Qty</u>
<div style="text-indent: 0.5em">3</div>
<div style="text-indent: 0.5em">1</div>
<div style="text-indent: 0.5em">1</div>
<div style="text-indent: 0.5em">2</div>
<div style="text-indent: 0.5em">8</div>
<div style="text-indent: 0.5em">1</div>
</div>
<p></p>
其他回答
与引导……这个答案(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/
几年后再来一个答案!
本文地址: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解决方案中,不是所有东西都垂直对齐到顶部。
这里有一个可能的解决方案:
代码片段:
ul { 宽度:760 px; margin-bottom: 20 px; 溢出:隐藏; Border-top: 1px实心#ccc; } 李{ 行高:1.5 em; Border-bottom: 1px实体#ccc; 浮:左; 显示:内联; } #双里{ 宽度:50%; } < ul id = "双" > <李>第一李< / > <李>第二李< / > <李>第三李< / > <李>第四李< / > < / ul >
这就完成了。 对于3列使用里宽为33%,对于4列使用25%,依此类推。
我试着把这作为评论发布,但不能让列显示正确(根据你的问题)。
你需要:
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支持)。