significado - span html

Prevenir el envolvimiento de contenedores(span o div)

Question

Me gustaría poner un grupo de elementos div 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 forma, 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é colocarlas en un contenedor y luego poner un estilo de "espacio en blanco: nowrap" en el contenedor, pero, por desgracia, parece que todavía se ajusta. 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: vea el site para ver ejemplos, pero estaban equivocados sobre no ser de otra manera, estoy seguro de que el artículo es viejo.

Answer 1

Como se mencionó, puedes usar:

overflow: scroll;

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

overflow: auto;

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

Answer 2

Funciona con solo esto:

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

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

Gracias por publicar esta solución.

Answer 3

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

Lo arrojé para probar (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.

Answer 4

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

Answer 5

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; } .slideContainer { overflow-x: scroll; } (qué navegadores pueden o no admitir 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 . Esto tiene un soporte de navegación entre navegadores decente hoy en día, pero como siempre, vale la pena probarlo en todos los navegadores de destino para estar seguro.