Foros del web, para los que viven de bits

DaChux · 16-mar-2007, 12:08

veamos, tengo una lista y le he puesto una imagen a cada item. Todo perfet. El problema es si quiero que la lista se muestre en horizontal y con imagen.... de echo, no se si es fallo mio o es que directamente no se puede.
Pongo en css

Código:

#contenido ul.horizontal{
	position:relative;
	list-style:url(imagenes/0007_bullet.png);
	width:90%;
	display:block;
}

#contenido ul.horizontal li{
	text-align:justify;
	margin: 8px 0 0 20px;
	line-height:1.8em;
	font-size:1.8em;
	display:inline;
}

y el xhtml

Código:

<div id="contenido">
<p>un parrafo</p>

<ul class="horizontal">
	<li>uno</li>
	<li>dos</li>
</ul>

<p>otro parrafo</p>
</div>

si a #contenido ul.horizontal li le quito el display:inline me lo muestra en vertical pero con imagenes.

Un saludo y gracias por ayudar

Mikmoro · 16-mar-2007, 12:44

Prueba a quitarle el display inline y añádele float: left;. Luego arregla los márgenes a ver qué pasa.

Mikel.

16-mar-2007, 12:08	#1 (permalink)
DaChux Fecha de Ingreso: diciembre-2003 Mensajes: 172	Problema con Listas veamos, tengo una lista y le he puesto una imagen a cada item. Todo perfet. El problema es si quiero que la lista se muestre en horizontal y con imagen.... de echo, no se si es fallo mio o es que directamente no se puede. Pongo en css Código: #contenido ul.horizontal{ position:relative; list-style:url(imagenes/0007_bullet.png); width:90%; display:block; } #contenido ul.horizontal li{ text-align:justify; margin: 8px 0 0 20px; line-height:1.8em; font-size:1.8em; display:inline; } y el xhtml Código: <div id="contenido"> <p>un parrafo</p> <ul class="horizontal"> <li>uno</li> <li>dos</li> </ul> <p>otro parrafo</p> </div> si a #contenido ul.horizontal li le quito el display:inline me lo muestra en vertical pero con imagenes. Un saludo y gracias por ayudar

16-mar-2007, 12:44	#2 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 3.359	Re: Problema con Listas Prueba a quitarle el display inline y añádele float: left;. Luego arregla los márgenes a ver qué pasa. Mikel.

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado