緊裹右側列表

如果我有類似下面的列表：緊裹右側列表

<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

在此先感謝...

來源

2011-06-24 Alex

這裏有一個有趣的列表上的文章除了這個話題：http://www.alistapart.com/文章/ multicolumnlists/ –

看起來很有趣，我會給它一個tyr。謝謝@Jamie Dixon – Alex

@Jamie Dixon - 很好的建議，不幸的是我需要按照我陳述的順序保留這些內容。 – Alex

現代瀏覽器

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

來源

2011-06-24 12:37:15

很好，不知道「column-count」 - 這裏有一個小提示：http://jsfiddle.net/pxfunc/zRwZM/ – MikeM

我將爲此更新（更好！）瀏覽器，並對舊版瀏覽器使用@Jamie Dixon建議。 – Alex

Afaik這不可能與CSS2。特別是如果你想保持像你提到的那樣的順序。

然而，有一個jQuery插件完全符合你的描述。

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

來源

2011-06-24 12:36:35 jantimon

嗯...它的一個選項。我試圖保持jQuery的最低限度。 – Alex

結果類似於Nikhil Bhandari的帖子，但它也適用於較老的瀏覽器（例如IE7或IE8） – jantimon

如果您想爲每一個<li>設置width，失去了元素的順序，這裏是演示：http://jsfiddle.net/dpXz2/

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

ul{ 
    width: 150px; 
}

來源

2011-06-24 12:41:12 IProblemFactory

不幸的是我需要按照我所述的順序保留這些，所以這種方法不起作用。感謝壽 – Alex

緊裹右側列表

回答

相關問題