Evitar envoltura de span o div

147

Me gustaría poner un grupo de divelementos de ancho fijo en un contenedor y hacer que aparezca la barra de desplazamiento horizontal. Los elementos div/ spandeben aparecer en una línea, de izquierda a derecha en el orden en que aparecen en el HTML (esencialmente sin envolver).

De esta manera, aparecerá la barra de desplazamiento horizontal y se puede usar en lugar de la barra de desplazamiento vertical para leer el contenido (de izquierda a derecha).

Intenté flotarlos en un contenedor y luego poner un white-space: nowrapestilo en el contenedor, pero, por desgracia, todavía parece envolverse.

Ideas?

Se veía así:

.slideContainer {
    white-space: nowrap;
}
.slide { 
    width: 800px;
    float: left;
    display: inline;
}
<div class="slideContainer">
    <div class="slide">Some content</div>
    <div class="slide">More content</div>
    <div class="slide">Even More content!</div>
</div>

ACTUALIZACIÓN:
Consulte el sitio para ver ejemplos, pero se equivocaron al no ser de otra manera; sin embargo, estoy seguro de que el artículo es antiguo.

cgp
fuente

Respuestas:

182

Prueba esto:

.slideContainer {
    overflow-x: scroll;
    white-space: nowrap;
}
.slide {
    display: inline-block;
    width: 600px;
    white-space: normal;
}
<div class="slideContainer">
    <span class="slide">Some content</span>
    <span class="slide">More content. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
    <span class="slide">Even more content!</span>
</div>

Tenga en cuenta que puede omitir .slideContainer { overflow-x: scroll; }(qué navegadores pueden admitir o no cuando lee esto), y obtendrá una barra de desplazamiento en la ventana en lugar de en este contenedor.

La clave aquí es display: inline-block. Hoy en día, cuenta con un soporte decente para varios navegadores , pero como de costumbre, vale la pena probarlo en todos los navegadores de destino para estar seguro.

Ron DeVera
fuente
1
En realidad, intenté esto por separado desde mi presentación completa y parecía funcionar relativamente bien (al menos en Firefox 3, IE 7, Chrome y Opera, que es todo lo que me importa)
cgp
Simplemente configurar white-space:normallos elementos contenidos y white-space:nowrapel padre hizo el truco para mí. ¡Muchas gracias!
Noitidart
espacio en blanco: normal es el valor predeterminado, por lo que incluso si no lo configura, está bien.
Parth
@Parth white-space: normalDEBE establecerse en los niños en este caso, ya que white-spacelos padres ya han anulado su valor predeterminado nowrap.
GullerYA
17

Funciona solo con esto:

.slideContainer {
    white-space: nowrap;
}
.slide { 
    display: inline-block;
    width: 600px;
    white-space: normal;
}

Originalmente tenía float : left;y eso evitó que funcionara correctamente.

Gracias por publicar esta solución.

Demolishun
fuente
3

Particularmente cuando se usa algo como Bootstrap de Twitter , white-space: nowrap;no siempre funciona en CSS cuando se aplica relleno o margen a un niño div. Sin embargo, agregar un border: 20px solid transparent;estilo equivalente en lugar de relleno / margen funciona de manera más consistente.

Brandonscript
fuente
1

Como se mencionó, puede usar:

overflow: scroll;

Si solo desea que aparezca la barra de desplazamiento cuando sea necesario, puede usar la opción "auto":

overflow: auto;

No creo que deba usar la propiedad "float" con "overflow", pero primero tendría que probar su ejemplo.

jthompson
fuente
0

Parece que los divs no saldrán del ancho de su cuerpo. Incluso dentro de otro div.

Lancé esto a prueba (sin un doctype) y no funciona como se pensaba.

.slideContainer {
    overflow-x: scroll;
}
.slide {
    float: left;
}
<div class="slideContainer">
    <div class="slide" style="background: #f00">Some content Some content Some content Some content Some content Some content</div>
    <div class="slide" style="background: #ff0">More content More content More content More content More content More content</div>
    <div class="slide" style="background: #f0f">Even More content! Even More content! Even More content!</div>
</div>

Lo que estoy pensando es que los div internos podrían cargarse a través de un iFrame, ya que esa es otra página y su contenido podría ser muy amplio.

Ólafur Waage
fuente
overflow-x o scroll-x, no puedo recordar cuál es. Perezoso hoy.
Kent Fredric