force float：left divs不要去下一行

Question

假設我有20個相同的div與float：left屬性和一些寬度。 我希望它們在一行中，如果它們不適合屏幕只是為了使頁面水平滾動。

小提琴

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; }

演示