html - para - list-style-position

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

Question

Tengo un problema al usar la display:inline de CSS display:inline propiedad en display:inline con la propiedad list-style-image: property en etiquetas <li> . 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. Aparecen si saco la display:inline propiedad en display:inline en la etiqueta <li> .

¿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?

Answer 1

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;
}

Answer 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. :)

Answer 3

Sugeriría que no se use list-style-image , ya que se comporta de manera bastante 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.

Answer 4

Desea que la imagen de estilo y la Navegación floten entre sí y luego use esto

ol.widgets ul
{
list-style-image:url(''some-img.gif'');
}
ol.widgets ul li
{
float:left;
}

Answer 5

Tuve un problema similar, lo resolví usando css ": before" ... el código se ve así:

.widgets li:before{
    content:"• ";
}

Answer 6

Intente 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.