嵌套div元素包裹浮动左

Question

我有四个嵌套的div元素float:left，第四个元素由于容器的长度而在第一个元素下面包装。

.container {
    width: 320px;
    height: 110px;
    overflow-x:scroll;
    border: 1px solid blue;
}

.nested      {
    width: 80px;
    height: 80px;
    background: red;
    float:left;
    margin:5px;

}

<div class='container'>
<div class='nested'></div>
<div class='nested'></div>
<div class='nested'></div>
<div class='nested'></div>
</div>

如何停止换行以使被查看的元素在x轴上可滚动（甚至隐藏/截断）？

http://jsfiddle.net/Tku65/

Answer 1

Demo

  white-space: nowrap;

将此属性添加到容器中。

尽量避免浮动属性。在这种情况下使用display: inline-block;。