Foros del Web » Creando para Internet » CSS »

Varios DIV en una sola linea

Estas en el tema de Varios DIV en una sola linea en el foro de CSS en Foros del Web. 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> ...
  #1 (permalink)  
Antiguo 10/05/2008, 11:56
 
Fecha de Ingreso: abril-2008
Mensajes: 122
Antigüedad: 9 años, 8 meses
Puntos: 1
Varios DIV en una sola linea

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
  #2 (permalink)  
Antiguo 10/05/2008, 14:06
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Re: Varios DIV en una sola linea

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> 
  #3 (permalink)  
Antiguo 10/05/2008, 15:09
 
Fecha de Ingreso: abril-2008
Mensajes: 122
Antigüedad: 9 años, 8 meses
Puntos: 1
Re: Varios DIV en una sola linea

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.
  #4 (permalink)  
Antiguo 10/05/2008, 16:53
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Varios DIV en una sola linea

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.
  #5 (permalink)  
Antiguo 11/05/2008, 03:29
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Re: Varios DIV en una sola linea

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> 
  #6 (permalink)  
Antiguo 23/12/2012, 04:07
Avatar de codeams  
Fecha de Ingreso: diciembre-2012
Ubicación: México
Mensajes: 103
Antigüedad: 5 años
Puntos: 16
Respuesta: Varios DIV en una sola linea

Código CSS:
Ver original
  1. div{display:inline;}

De esa manera los divs no provocarán el "salto de línea"
__________________
¿Quién es codeams? codeams.ml
¿Qué hace en su tiempo libre? codepen.io/codeams
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:41.