Me gustaría poner un grupo de div
elementos de ancho fijo en un contenedor y hacer que aparezca la barra de desplazamiento horizontal. Los elementos div
/ span
deben 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: nowrap
estilo 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.
white-space:normal
los elementos contenidos ywhite-space:nowrap
el padre hizo el truco para mí. ¡Muchas gracias!white-space: normal
DEBE establecerse en los niños en este caso, ya quewhite-space
los padres ya han anulado su valor predeterminadonowrap
.Funciona solo con esto:
Originalmente tenía
float : left;
y eso evitó que funcionara correctamente.Gracias por publicar esta solución.
fuente
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ñodiv
. Sin embargo, agregar unborder: 20px solid transparent;
estilo equivalente en lugar de relleno / margen funciona de manera más consistente.fuente
Como se mencionó, puede usar:
Si solo desea que aparezca la barra de desplazamiento cuando sea necesario, puede usar la opción "auto":
No creo que deba usar la propiedad "float" con "overflow", pero primero tendría que probar su ejemplo.
fuente
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.
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.
fuente