如果我有以下列表:
<ul>
<li>Alex</li>
<li>James</li>
<li>Thomas</li>
<li>Is</li>
<li>Asking</li>
<li>Questions</li>
<li>On</li>
<li>Stackoverflow</li>
</ul>
默认显示如下:
* Alex
* James
* Thomas
* Is
* Asking
* Questions
* On
* Stackoverflow
我将使用什么CSS来显示它:
* Alex * Questions
* James * On
* Thomas * Stackoverflow
* Is
* Asking
提前致谢...
答案 0 :(得分:13)
适用于现代浏览器
ul{
-ms-column-count: 2;
-o-column-count: 2;
-moz-column-count: 2;
-khtml-column-count: 2;
column-count: 2;
}
答案 1 :(得分:2)
如果您希望为每个width
设置<li>
并丢失元素顺序,请参阅演示:http://jsfiddle.net/dpXz2/
li{
display: block;
float: left;
width: 75px;
}
ul{
width: 150px;
}
答案 2 :(得分:1)
Afaik使用CSS2是不可能的。 特别是如果你想像你提到的那样保留订单。
然而,有一个jQuery插件可以完全按照您的描述进行操作。
http://www.christianyates.com/blog/mmm-geeky/multi-column-lists-jquery-alternative-method