Desplazamiento horizontal?

Question

No estoy seguro de dónde he visto esto antes, pero estoy seguro de que hay una manera de hacer scroll horizontal.

Digamos, por ejemplo, tiene varias Div es el FF: Estructura:

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

Im en busca de una manera de hacer que se alinean horizontalmente y sin romper a la siguiente línea. Y habrá un desplazamiento horizontal en lugar de desplazamiento vertical.

Normalmente, si hice un flotador: izquierda o pantalla: en línea, después de que el div llene suficiente espacio horizontal irá a la siguiente línea. ¿Hay alguna forma de hacer que se alinee en una línea horizontal recta y hacer un h-scroll para eso?

Answer 1

Esto debería funcionar:

<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

En realidad no tiene que establecer el ancho en el CSS. Establecer el ancho es malo, ya que no le permite escalar, lo que significa que tendría que cambiar el ancho cada vez que creó un nuevo elemento. En su lugar, debe dar a la clase .container una regla white-space: nowrap y tener sus hijos display establecidos en inline-block. P.ej.

.container { 
    white-space: nowrap; 
} 

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

Ahora ya no tendrá que establecer el ancho para obtener esta funcionalidad de desplazamiento horizontal.