将列表包装到右侧

时间:2011-06-24 12:30:37

标签: html css

如果我有以下列表:

<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

提前致谢...

3 个答案:

答案 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