Горизонтальная прокрутка?

Question

Я не уверен, где я это видел раньше, но я уверен, что есть способ сделать горизонтальный прокрутки.

Позволяет сказать, например, у вас есть несколько DIVs является ФФ: структура:

<div class="container"> 
    <div>Content</div> 
    <div>Content</div> 
    <div>Content</div> 
    <div>Content</div> 
    <div>Content</div> 
</div> 

Im ищет способ, чтобы сделать его выровнять по горизонтали и не нарушая к следующей строке. И вместо вертикального прокрутки будет горизонтальная прокрутка.

Обычно, если я сделал поплавок: слева или на дисплее: встроенный, после того, как div заполнит достаточно горизонтальное пространство, он перейдет к следующей строке. Есть ли способ заставить его выровнять по прямой горизонтальной линии и сделать для этого h-scroll?

Answer 1

Это должно работать:

<div class="container"> 
    <div class="scroller"> 
    <div class="content">Content</div> 
    <div class="content">Content</div> 
    <div class="content">Content</div> 
    <div class="content">Content</div> 
    <div class="content">Content</div> 
    </div> 
</div> 

<style> 
.container { 
    width:200px; 
    overflow:scroll; 
} 
.scroller { 
    width:1000px; 
} 
.content { 
    width:200px; 
    float:left; 
} 
</style> 

Answer 2

Вы на самом деле не установить ширину в CSS. Установка ширины плохо, так как она не позволяет масштабировать значение, которое вам нужно будет менять ширину каждый раз при создании нового элемента. Вместо этого вы должны дать .container класс a white-space: nowrap и иметь своих детей display, установленных на inline-block. Например.

.container { 
    white-space: nowrap; 
} 

.container > div { 
    display: inline-block; 
} 

Теперь вам больше не нужно устанавливать ширину, чтобы получить эту функцию горизонтальной прокрутки.