Alinear horizontalmente div dentro de li

[artek]

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.

[Triby]

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

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:

<ol>
    <li style="line-height:20px"><img src="imagen" style="float:right; alt="texto alternativo" />Lorem ipsum</li>
</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..

[artek]

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?

[upm]

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

Saludos.

[adriancitov7]

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

[artek]

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

[adriancitov7]

jeje de nada

Adios !

[kseso?]

Iniciado por Triby

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

[pitufoweb]

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

[Triby]

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.