强制水平溢出

Question

是否可以使用单个容器强制元素停留在一行（带有水平滚动条）上div？

为什么内部 div 落在多行上而不是在同一行上？

演示：http : //jsfiddle.net/6PupD/61/

我想达到同样的效果这却无需使用额外的容器。

Answer 1

一种选择是添加white-space: nowrap到父容器元素。鉴于子元素是inline-block，white-space: nowrap父元素上的属性将强制它们保持内联而不换行。只需删除float: left它就会起作用。

此处更新示例

#container {
    width: 300px;
    overflow-x: scroll;
    overflow-y:hidden;
    max-height: 150px;
    white-space: nowrap; /* Added */
}
.obj {
    width: 100px;
    height: 100px;
    background-color: #888;
    margin: 3px;
    display: inline-block; /* Removed float: left */
}