强制水平溢出

Question

使用单个容器div可以强制元素保持在单行（使用水平滚动条）吗？

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

DEMO：http://jsfiddle.net/6PupD/61/

我想达到与this相同的效果，但不使用额外的容器。

Answer 1

一个选项是将white-space: nowrap添加到父容器元素。鉴于子元素为inline-block，父元素上的属性white-space: nowrap将强制它们保持内联而不会破坏新行。只需删除float: left即可。

Updated Example Here

#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 */
}

Answer 2

您也可以使用flexbox -

http://jsfiddle.net/clintioo/6PupD/92

#container {
    width: 315px;
    overflow-x: scroll;
    overflow-y: hidden; 
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    -moz-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
}
.obj {
    min-width: 100px;
    width: 100px;
    height: 100px;
    background-color: #888;
    margin: 3px;
}