html - 嵌套 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 会断线。

谢谢。

Answer 1

您已将容器的宽度设置为 200 像素。这强制包装。为防止出现这种情况，请使用 white-space 属性:

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

Demo