позволяет сказать, что у меня есть 20 одинаковых div с свойством float: left и некоторой шириной. Я хочу, чтобы они были в одной строке, и если они не подходят на экране, просто чтобы страница прокручивалась по горизонтали.
Force float: left divs to dont перейти к следующей строке
Ответ 1
В принципе, как работает float. Если вы хотите, чтобы описанное поведение вы могли сделать что-то другое, например white-space: nowrap; в контейнере и display: inline-block; вместо float.
.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; }