嵌套的DIV和水平滾動條

Question

我有如下的DIV：

<div class="container"> 
    <div>Box 1</div> 
    <div>Box 2</div> 
    <div>Box 3</div> 
</div> 

而且後續的CSS：

.container{ 
    width:200px; 
    height:100px; 
    background-color:gray; 
    overflow: auto; 
} 

.container div{ 
    width:80px; 
    height:80px; 
    background-color:red; 
    display:inline-block; 
} 

返回這個結果： http://jsfiddle.net/becy1x62/

我想要一個水平滾動條和不是垂直的。我不知道爲什麼集裝箱內的DIV是斷線的。

Tks。

Answer 1

您已經在容器上設置了200px的寬度。這強制包裝。爲了防止這種情況，使用white-space屬性：

.container { 
    ... 
    white-space: nowrap; 
} 

Demo