CSS：阻止LI在UL中打包

Question

我有一個UL列表，我已經使用float: left轉換成了列，並給出了每個width: 300px。如果總列寬比頁面長，我需要這些列跨越頁面並使頁面從左向右滾動。

但目前，一旦它們達到頁面的寬度，下一列將顯示在下方，而不是使頁面從左向右滾動。

我試過使用overflow: auto和white-space: nowrap這通常工作，但不是在這種情況下。

這裏是我的CSS：

#container { 
    overflow: auto; 
    white-space: nowrap; 
    } 
#container ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    overflow: auto; 
    white-space: nowrap; 
    } 
#container ul li { 
    float: left; 
    width: 300px; 
    margin-right: 5px; 
    } 

和HTML：

<div id="container"> 
<ul> 
    <li>This is 300px in width</li> 
    <li>This is 300px in width</li> 
    <li>This is 300px in width</li> 
    <li>This is 300px in width</li> 
    <li>This is 300px in width</li> 
    <li>This is 300px in width</li> 
    <li>This is 300px in width</li> 
    <li>This is 300px in width</li> 
    <li>This is 300px in width</li> 
</ul> 
</div> 

唯一的其他選擇，我能想到的是使用JavaScript來強制對DIV的寬度，但我更喜歡如果可能的話不要。

Answer 1

用您的LI替換float: left與display: inline-block。

#container ul li { 
    /*float: left;*/ 
    display: inline-block; 
    width: 300px; 
    margin-right: 5px; 
} 

演示：http://jsfiddle.net/Eft9J/

Answer 2

是或只是定義李時珍爲塊級別的項目。李自然會顯示在線十歲上下，讓他們漂浮，你需要告訴他們跟隨盒模型：

#container ul li { 
    float: left; 
    display:block; 
    width: 300px; 
    margin-right: 5px; 
    } 

然後你在最後一個元素需要明確：

#container ul li::last{ 
    clear:both; 
}