force float：left divs不要去下一行

Question

假设我有20个相同的div，其中包含float：left属性和一些宽度。我希望它们在一行中，如果它们不适合屏幕只是为了使页面水平滚动。

fiddle

Answer 1

这基本上是浮动的工作原理。如果您想要所描述的行为，您可以改为做其他事情，例如容器上的white-space: nowrap;和display: inline-block;而不是浮动。

http://jsfiddle.net/NPzsV/3/

.container {
    white-space: nowrap;
}
.line {
    display: inline-block;
    width: 200px;
    vertical-align: top;
    white-space: normal;
}

有一点需要注意：使用这种方法，div之间的换行符/空格/制表符会在渲染中产生空格。

Answer 2

在div上使用display: inline-block代替float: left，并将属性white-space: nowrap添加到其父容器中。

演示：http://jsbin.com/akiniv/1/edit

用小提琴演示;）http://jsfiddle.net/NPzsV/4/

Answer 3

将高度设置为父div，并添加属性overflow：scroll

<div class="parentDiv"> 
    <div class="line">ddd</div>
    <div class="line">ddd</div>
    <div class="line">ddd</div>
     ...
</div>

和css：

.parentDiv{height:50px; overflow: scroll;}

Answer 4

在父元素上设置硬宽度：

 body{ width:8000px; }

Demo