使列表2列

Question

請看看http://www.animefushigi.com/的頁腳，我試圖讓聯盟列表2列，因爲1太長。

的代碼如下

<ul class="none"><li><span>Affiliates<em>&nbsp;</em></span></li> 
<li>link 1</li> 
<li>link 2</li> 
etc etc 

Answer 1

也許你可以嵌套UL這樣的：http://jsfiddle.net/seler/ThvUJ/（以即LTE 8不會工作：

<ul class="none"> 
<li><span>Affiliates<em>&nbsp;</em></span></li> 
<ul> 
    <li>link 1</li> 
    <li>link 2</li> 
</ul> 
<ul> 
    <li>link 3</li> 
    <li>link 4</li> 
</ul> 
</ul> 

Answer 2

你可以只使用CSS嘗試這樣的事情）

但我認爲這樣做的最好方法是製作js腳本，它將計算li元素並在必要時添加</ul><ul>。 （例如：http://jsfiddle.net/seler/ThvUJ/3/）

Answer 3

如果你希望你的頁腳是一個特定的高度，你可以這樣做：http://jsfiddle.net/NfMPX/

基本上，設置ul的高度和浮動，並設置一個寬度爲li S和他們會自動換行。

Answer 4

如果順序無關緊要（我假設它並不是因爲您使用的是無序列表），您可以使用當前HTML實現此效果。只需浮動您的列表元素，使其中只有兩個可以適合每行。下面是我的意思一個簡單的例子：

ul { 
    width: 200px; 
    list-style: none; 
} 
li { 
    float: left; 
    width: 90px; /* 100 - 5 - 5 */ 
    margin: 3px 0; 
    padding: 0 5px; 
} 
li a { 
    width: 90px; 
    display: block; 
}