开发者

Wrap a list to the right

If i had a list like the following:

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

The default will be displayed like:

* Alex   
* James
* Thomas
* Is
* Asking
* Questions
* On
* Stackoverflow

What CSS would i use to get it to display like:

* Alex     * Questions
* James    * On
* Thomas   * St开发者_如何学运维ackoverflow
* Is
* Asking

Thanks in advance...


For modern browsers

ul{
    -ms-column-count: 2;
    -o-column-count: 2;
    -moz-column-count: 2;
    -khtml-column-count: 2;
    column-count: 2;
    }


If you would like set width for every <li> and lost order of elements, here is demo: http://jsfiddle.net/dpXz2/

li{
    display: block;
    float: left;
    width: 75px;
}

ul{
    width: 150px;
}


Afaik this is not possible with CSS2. Especially if you want to keep the order like you mentioned it.

However there is a jQuery Plugin that does exactly what you descripted.

http://www.christianyates.com/blog/mmm-geeky/multi-column-lists-jquery-alternative-method

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜