imágenes CSS usando en lugar de balas

Question

que quiero usar tres imágenes diferentes en lugar de balas para crear un lisli> t

Ejemplo:

<ul> 
    <li>The dog is big</li> 
    <li>The dog is small</li> 
    <li>The dog is medium sized</li> 
</ul> 

Así que en lugar de balas antes de cada una de las frases anteriores no lo haría ser una imagen diferente antes de cada uno.

Answer 1

Use list-style-image: url (imagename); para reemplazar las viñetas por completo con imágenes. La desventaja de este método es que cada navegador posiciona las imágenes de manera diferente. Las imágenes de fondo de CSS para las viñetas de la lista son un método más consistente.

de http://css.maxdesign.com.au/listamatic/vertical04.htm

Answer 2

puede utilizar el list-style-image propiedad.

ul.dogbig 
{ 
    list-style-image:url("/images/dogbig.gif"); 
} 

Answer 3

Hay una propiedad de CSS por ejemplo, pero creo que no funciona para todos los diferentes <li> elemento:

ul 
{ 
list-style-image:url("/images/blueball.gif"); 
list-style-type:square; 
} 

espero que le ayudaría a

Answer 4

Live Demo

Esto hace uso de la propiedad CSS list-style-image.

HTML:

<ul> 
    <li class="b1">The dog is big</li> 
    <li class="b2">The dog is small</li> 
    <li class="b3">The dog is medium sized</li> 
</ul> 

CSS:

ul { 
    margin: 0 0 0 32px; 
    line-height: 1.5 
} 
.b1 { 
    list-style-image: url(http://upload.wikimedia.org/wikipedia/commons/1/19/Icons-mini-icon_attachment.gif); 
} 
.b2 { 
    list-style-image: url(http://upload.wikimedia.org/wikipedia/commons/6/61/Icons-mini-icon_security.gif); 
} 
.b3 { 
    list-style-image: url(http://upload.wikimedia.org/wikipedia/commons/a/ab/Icons-mini-icon_clock.gif); 
}