創建一個div的行，並添加一個滾動到他們的容器div

Question

我怎樣才能在一行中的div線內的一組正方形，並觸發水平滾動時，正方形超過div寬？

這jsfiddle顯示灰色方塊包裹不正確給予一個狹窄的寬度。灰色的方塊應該總是在1行，容器div應該有一個水平滾動。

http://jsfiddle.net/anqKb/

事情我已經嘗試：

各種position: absolute和overflow: scroll屬性。沒有組合似乎得到了可滾動容器div的預期效果。

Answer 1

爲了使直列塊永遠留在一排，在容器使用white-space:nowrap。可選的溢出（即當內容寬度超過父寬度時）是通過overflow:auto實現的。

Here's an updated fiddle。

Answer 2

更新的CSS以下

.container { 
    width: 100%; 
    height: 100px; 
    background: rgb(100, 100, 100); 
    overflow:auto; 
} 

希望這有助於

Answer 3

選中此Demo。 更改您的容器類如下。

.container { 
    width: 100%; 
    height: 120px; 
    background: rgb(100, 100, 100); 
    white-space: nowrap; 
    overflow-y:hidden; 
    overflow-x:scroll; 
} 

Answer 4

您可以使用另一個包含正方形並設置固定寬度。

.setWidth { 
    width: 740px; 
} 

www.jsfiddle.net/anqKb/10/

Answer 5

見http://jsfiddle.net/anqKb/17/的解決方案。你需要white-space: nowrap;，這樣你的每個盒子都不會換行並繼續下一頁。

所以我補充說，overflow:scroll;到.container它的工作原理。

Answer 6

添加空格：NOWRAP沿與寬度增加與滾動你的容器X可見和y隱藏

<div class="container"> 
<div style="width: auto; white-space: nowrap"> 
    <div class="thumbnail"> 
    </div> 
    <div class="thumbnail"> 
    </div> 
    <div class="thumbnail"> 
    </div> 
    <div class="thumbnail"> 
    </div> 
    <div class="thumbnail"> 
    </div> 
    <div class="thumbnail"> 
    </div> 
    <div class="thumbnail"> 
    </div> 
    <div class="thumbnail"> 
    </div> 
</div> 

.container { 
width: 500px; 
height: 120px; 
background: rgb(100, 100, 100); 
overflow-x: scroll; 
overflow-y: hidden; 

}

檢查：http://jsfiddle.net/anqKb/19/