Foros del Web » Diseño web » CSS »

Alinear horizontalmente div dentro de li

Estas en el tema de Alinear horizontalmente div dentro de li en el foro de CSS en Foros del Web. Hola, he intentado de varias formas y no he podido alinear horizontalmente una div con imágenes dentro a un párrafo, todo esto dentro de un ...
  #1 (permalink)  
Antiguo 25/04/2009, 14:19
 
Fecha de Ingreso: septiembre-2006
Mensajes: 19
Antigüedad: 8 años
Puntos: 0
Alinear horizontalmente div dentro de li

Hola, he intentado de varias formas y no he podido alinear horizontalmente una div con imágenes dentro a un párrafo, todo esto dentro de un li.

Hice un ejemplo para que puedan ver, tiene estilos en línea pero obviamente luego lo haría a través de CSS.

Aquí el ejemplo:
chocolatedonas.brinkster[punto]net/li-div/

Y el código:

Código:
<ol>
    <li>

      <p>Lorem ipsum</p>
      <div style="width:80px; border: green solid 1px"><img src="formas.jpg" width="80" height="20" /></div>
    </li>
    <li>
      <p>Dolor sit amet</p>
      <div style="width:80px; border: green solid 1px"><img src="formas.jpg" width="80" height="20" /></div>
    </li>
    <li>

      <p>Consectetur adipiscing elit</p>
	  <div style="width:80px; border: green solid 1px"><img src="formas.jpg" width="80" height="20" /></div>
    </li>
    <li>
      <p>In sed risus </p>
      <div style="width:80px; border: green solid 1px"><img src="formas.jpg" width="80" height="20" /></div>
    </li>
   
  </ol>
Espero que me puedan ayudar, gracias.
Saludos, Artek.
  #2 (permalink)  
Antiguo 25/04/2009, 17:45
Avatar de Triby
Foto-mod
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.013
Antigüedad: 6 años, 2 meses
Puntos: 1951
Respuesta: Alinear horizontalmente div dentro de li

li es un elemento de linea y, por tanto, es un error colocar dentro elementos de linea multiple (p) o de bloque (div).

Cita:
Iniciado por artek
... div con imágenes dentro a un párrafo ...
Las imagenes estan fuera del parrafo.

Donde quieres que esten alineadas, a la derecha?

Código html:
Ver original
  1. <ol>
  2.     <li style="line-height:20px"><img src="imagen" style="float:right; alt="texto alternativo" />Lorem ipsum</li>
  3. </ol>

line-height:20px hace que la linea de texto tenga 20 pixeles de altura
float:right; hace que la imagen se posicione a la derecha, alineada al extremo derecho de la lista, a la que tambien puedes asignarle ancho especifico..
__________________
- León, Guanajuato
- GV-Foto
  #3 (permalink)  
Antiguo 25/04/2009, 19:28
 
Fecha de Ingreso: septiembre-2006
Mensajes: 19
Antigüedad: 8 años
Puntos: 0
Respuesta: Alinear horizontalmente div dentro de li

Ok Triby, gracias por la aclaración de no poder poner divs ni párrafos en el li.

Estuve probando lo que me sugieres, el problema es que quiero que la imagen quede alineada a la derecha del texto de cada elemento de la lista, y al ponerle float:right queda alineada a la derecha pero de la div contenedora.

¿Como hago para que quede a continuación del texto?
  #4 (permalink)  
Antiguo 25/04/2009, 19:36
upm
 
Fecha de Ingreso: abril-2009
Mensajes: 10
Antigüedad: 5 años, 6 meses
Puntos: 2
Respuesta: Alinear horizontalmente div dentro de li

Intenta usar style='display: inline;' ... a ver cómo te va ...

Saludos.
  #5 (permalink)  
Antiguo 26/04/2009, 02:18
Avatar de adriancitov7  
Fecha de Ingreso: abril-2009
Ubicación: New York
Mensajes: 75
Antigüedad: 5 años, 6 meses
Puntos: 4
De acuerdo Respuesta: Alinear horizontalmente div dentro de li

esta bien lo que te recomiendan de no usar elemento de bloque dentro de linea osea tu quieras una imagen al costado del texto para eso usamos un line height y un margin-bottom en negativo

aqui te dejo el codigo y una imagen no se si es lo que deseas . por cierto me mareo con tu codigo asi que lo arregle un pokitin recuerda ponerle un DTD.



PD: como ves solo copio y pego mas elementos y toman el estilo ya que esta definido saludos aqui te dejo como me quedo y valida.
probado en ie 6 y firefox 3

adriancito.co.cc/pruebas/lista/index.html

Última edición por adriancitov7; 26/04/2009 a las 02:40
  #6 (permalink)  
Antiguo 26/04/2009, 07:13
 
Fecha de Ingreso: septiembre-2006
Mensajes: 19
Antigüedad: 8 años
Puntos: 0
Respuesta: Alinear horizontalmente div dentro de li

Genial adriancitov7!, ha funcionado a la perfección, valida y all browsers.
Muchas gracias!


Emm..., tengo un problema con una gif, a ver si alguien sabe que puede ser
forosdelweb[punto]com/f91/gif-animado-reproducido-correctamente-solo-firefox-opera-693156/#post2884566
  #7 (permalink)  
Antiguo 26/04/2009, 07:31
Avatar de adriancitov7  
Fecha de Ingreso: abril-2009
Ubicación: New York
Mensajes: 75
Antigüedad: 5 años, 6 meses
Puntos: 4
De acuerdo Respuesta: Alinear horizontalmente div dentro de li

jeje de nada

Adios !
  #8 (permalink)  
Antiguo 26/04/2009, 12:14
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.810
Antigüedad: 7 años, 4 meses
Puntos: 537
Respuesta: Alinear horizontalmente div dentro de li

Cita:
Iniciado por Triby Ver Mensaje
li es un elemento de linea y, por tanto, es un error colocar dentro elementos de linea multiple (p) o de bloque (div).
hola Triby, siento discrepar.
Dentro de un <li> caben muchas cosas sin que sea un error. Por caber, caben hasta otras listas dentro de él.
Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #9 (permalink)  
Antiguo 26/04/2009, 12:29
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.141
Antigüedad: 6 años, 9 meses
Puntos: 179
Respuesta: Alinear horizontalmente div dentro de li

Es cierto lo que dice Kseso. La etiqueta <li> es un elemento de bloque y no de linea como dice nuestro compañero Triby.


saludos
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #10 (permalink)  
Antiguo 27/04/2009, 15:26
Avatar de Triby
Foto-mod
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.013
Antigüedad: 6 años, 2 meses
Puntos: 1951
Respuesta: Alinear horizontalmente div dentro de li

kseso? y pitufoweb, tienen razón, <li> es elemento de bloque, sorry.

Sirva para mi defensa que seguramente me confundio el hecho de querer poner un <div> dentro de un <p>... de cualquier forma, pondre mas atencion para la proxima.
__________________
- León, Guanajuato
- GV-Foto
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 19:01.
SEO by vBSEO 3.3.2