防止浮動元素纏繞（改爲顯示滾動條）

Question

如何使div標記的元素不環繞，而是超出頁面上的可用空間？

例如，我有：

<div class="container"> 
<div class="row"> 
    <div class="child">1</div> 
    <div class="child">2</div> 
    ... 
    <div class="child">19</div> 
    <div class="child">20</div> 
</div> 
<div class="row"> 
    <div class="child">1</div> 
    <div class="child">2</div> 
    ... 
    <div class="child">19</div> 
    <div class="child">20</div> 
</div> 
</div>​ 

CSS：

.container{ 
    overflow: scroll; 
    width: 100%; 
} 
.row { 
    clear: both; 
} 

實際輸出：

所需的輸出：

http://jsfiddle.net/kcW6w/

我想要的容器元素，以100％的寬度，但有一個滾動條，使每一行不繞回。

我發現如果我爲.row元素設置了一個很大的任意寬度，它就能正常工作。除了設置任意寬度之外，還有其他方法可以做到這一點嗎？我不想使用硬編碼寬度，因爲寬度會動態變化。

.row { 
    clear: both; 
    width: 2000px; 
} 

http://jsfiddle.net/kcW6w/1/

我也注意到有一些矛盾與Safari瀏覽器滾動條我設置的任意值，可能是因爲，。在Chrome上的Mac OS X

滾動條不一致（滾動一路到右）：

Safari瀏覽器甚至不顯示滾動條。

Answer 1

你可以試試這個 - DEMO

CSS

.container { 
    overflow: scroll; 
} 

.row { 
    white-space: nowrap; 
    font-size: 0; 
} 

.child { 
    font-size: 16px; 
    width: 60px; 
    height: 60px; 
    border: 1px solid black; 
    background-color: #ccc; 
    display: inline-block; 
}