etiquetas - css meaning

un div ancho con ancho ilimitado

Question

Tengo un gran problema!

Ya sabes, un width predeterminado de div es 100% (del padre). Y si el ancho de su contenido es superior al 100% (100% = 1440px), div muestra el contenido en múltiples líneas.

Ahora, si quiero, el div muestra su contenido en una línea, ¿qué debo hacer? mira el código simple ::

<div>
    <div>aaa</div>
    <div>bbb</div>
    <div>ccc</div>
    <div>ddd</div>
    ......(more than 100 other div, with unknown width)
</div>

NOTA: No sé el ancho del contenido.

Intenté display: inline; y display: inline-block; y display: table; . ellos no trabajaron

NOTA 2: Intenté display: -moz-box; . Funciona, pero solo en FIREFOX! Gracias ...

Answer 1

La forma más sencilla es usar white-space: nowrap en el elemento principal y display: inline-block en el elemento secundario:

Ver: http://jsfiddle.net/4Yv83/

También agregué overflow-x: auto , porque presumiblemente no quieres esto .

Answer 2

Simplemente dile al texto dentro de la div que no se envuelva.

div {
  white-space: nowrap;
}

Answer 3

pasaron algunos años, pero ... creo que sería mejor establecer el desbordamiento en oculto, porque no necesitamos mostrar todos los elementos secundarios a la vez. Utilizamos este tipo de estilo en los componentes similares a diapositivas. por lo que sugiero establecer "desbordamiento: oculto" al elemento padre.

/* for parent element */
overflow: hidden;