Varios DIV en una sola linea

Alejo18 · #1 (**permalink**) 10/05/2008, 10:56

Buenas como haría varios divs que esten en una sola linea y no se vayan para abajo

Al poner

Código HTML:

<DIV>
<div>10</div>
<div>20</div>
<div>30</div>
<div>40</div>
<div>50</div>
</DIV>

Se pone uno debajo de otro

Ahora si pruebo asi,

Código HTML:

<div>
  <div style="float:left">10</div>
  <div style="float:left">20</div>
  <div style="float:left">30</div>
  <div style="float:left">40</div>
  <div style="float:left">50</div>
</div>

Bien no se saltan los divs para abajo quedan en una sola linea, ahora la pregunta es si hay algun otro metodo para juntar todos esos divs sin tener que poner float:left, pero que queden en una sola linea, asi como lo hace <td></td> en tablas, gracias y saludos

Raulmmmm · #2 (**permalink**) 10/05/2008, 13:06

Al div que los contiene le puedes poner un id, por ejemplo contenedor:

Código HTML:

<div id="contenedor">
<div>10</div>
<div>20</div>
<div>30</div>
<div>40</div>
<div>50</div>
</div>

Y entre <head> y </head> puedes poner esto:

Código HTML:

<style>
#contenedor div{ float:left; }
</style>

Alejo18 · #3 (**permalink**) 10/05/2008, 14:09

Muchas gracias ya lo aplique una pregunta, pero si el contenedor mide 50px, como haria para que todos los divs de dentro se coloquen al centro o enmedio

asi como indica el rectangulo rojo

Lo unico que puedo hacer es ponerle padding- pero se hace muy dificil cuantos pixeles hay del inicio al enmedio y más si el contenedor es mas grande.

saludos y Gracias nuevamente.

Mikmoro · #4 (**permalink**) 10/05/2008, 15:53

Usando line-height: 30px; o los px que tú quieras.

No obstante, me da la sensación de que quieres tabular datos. Si es así, debes usar una tabla. Las tablas no se deben usar para posicionar elementos o maquetar, pero sí para tabular datos.

Mikel.

Raulmmmm · #5 (**permalink**) 11/05/2008, 02:29

Pues, tal como te dice Mikel, si el contenedor mide 50px de alto, basta con que le pongas un line-height de 50px. El CSS quedaría así:

Código HTML:

<style>
#contenedor{ height: 50px; line-height: 50px; }
#contenedor div{ float:left; }
</style>

codeams · #6 (**permalink**) 23/12/2012, 04:07

Código CSS:

Ver originaldiv{display:inline;}

De esa manera los divs no provocarán el "salto de línea"