Force float: left divs to dont перейти к следующей строке

позволяет сказать, что у меня есть 20 одинаковых div с свойством float: left и некоторой шириной. Я хочу, чтобы они были в одной строке, и если они не подходят на экране, просто чтобы страница прокручивалась по горизонтали.

fiddle

Ответ 1

В принципе, как работает float. Если вы хотите, чтобы описанное поведение вы могли сделать что-то другое, например white-space: nowrap; в контейнере и display: inline-block; вместо float.

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

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

Следует отметить одно: при таком подходе символы новой строки/пробелы/табуляции между divs вызовут пробел между ними в рендеринге.

Ответ 2

Используйте display: inline-block вместо float: left в divs и добавьте свойство white-space: nowrap в родительский контейнер.

Демо: http://jsbin.com/akiniv/1/edit

Демо с вашей скрипкой;) http://jsfiddle.net/NPzsV/4/

Ответ 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;}

Ответ 4

Задайте жесткую ширину родительского элемента:

 body{ width:8000px; }

Демо