Visualización CSS: propiedad en línea con list-style-image: propiedad en etiquetas <li>

votos
17

Tengo un problema al usar la display:inlinepropiedad de CSS con la list-style-image:propiedad en las <li>etiquetas. Básicamente, quiero dar salida a lo siguiente:

* Link 1  * Link 2

donde *representa una imagen.

Estoy haciendo esto con el siguiente bit de HTML:

<ol class=widgets>
    <li class=l1>Link 1</li>
    <li class=l2>Link 2</li>
</ol>

que está diseñado con el siguiente bit de CSS:

ol.widgets { list-style-type:none; }

ol.widgets li { display:inline;
                margin-left:10px; }

ol.widgets li.l1 { list-style-image:url(image1.gif); }

ol.widgets li.l2 { list-style-image:url(image2.gif); }

El problema es que cuando los elementos de la lista se muestran en línea, las imágenes asociadas con los elementos de la lista no aparecen. Ellos no aparecen si saco la display:inlinepropiedad en la <li>etiqueta.

¿Hay alguna manera de hacer que las imágenes aparezcan incluso cuando los elementos de la lista se muestran en línea, o es simplemente imposible?

Publicado el 09/12/2008 a las 22:25
fuente por usuario
En otros idiomas...                            


6 respuestas

votos
32

Intenta usar float: left(o right) en lugar de display: inline. La pantalla en línea reemplaza la visualización del elemento de lista, que es lo que agrega los puntos de viñeta.

Respondida el 09/12/2008 a las 22:30
fuente por usuario

votos
5

Desea que los elementos de la lista se alineen uno al lado del otro, pero realmente no sean elementos en línea. Así que flote en su lugar:

ol.widgets li { 
    float: left;
    margin-left: 10px;
}
Respondida el 09/12/2008 a las 22:33
fuente por usuario

votos
4

Tuve problema similar, resuelvo con css ": antes" .. el código mira gustos esto:

.widgets li:before{
    content:"• ";
}
Respondida el 10/07/2013 a las 16:02
fuente por usuario

votos
2

Desea que la imagen y el estilo de navegación con el flotador entre sí a continuación, utilizar como esto

ol.widgets ul
{
list-style-image:url('some-img.gif');
}
ol.widgets ul li
{
float:left;
}
Respondida el 05/07/2012 a las 12:43
fuente por usuario

votos
2

Si observa la propiedad 'mostrar' en la especificación CSS, verá que 'list-item' es específicamente un tipo de visualización. Cuando establece un elemento como "en línea", está reemplazando el tipo de visualización predeterminado de elemento de lista, y el marcador es específicamente una parte del tipo de elemento de lista .

La respuesta anterior sugiere float, pero lo he intentado y no funciona (al menos en Chrome). De acuerdo con la especificación , si configura sus cuadros para que floten hacia la izquierda o hacia la derecha, "La 'pantalla' se ignorará, a menos que tenga el valor 'ninguno'". Considero que esto significa que el tipo de visualización por defecto de 'list-item' se ha ido (llevándose el marcador) tan pronto como flote el elemento.

Editar: Sí, creo que estaba equivocado. Ver entrada superior. :)

Respondida el 09/12/2008 a las 22:38
fuente por usuario

votos
1

Sugeriría no usar list-style-image, ya que se comporta de manera diferente en diferentes navegadores, especialmente en la posición de la imagen

en cambio, puedes usar algo como esto

ol.widgets,
ol.widgets li { list-style: none; }
ol.widgets li { padding-left: 20px; backgroud: transparent ("image") no-repeat x y; }

funciona en todos los navegadores y le daría el mismo resultado en diferentes navegadores.

Respondida el 09/12/2008 a las 22:44
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more