Ajustar la posición de la imagen de estilo de lista?

Normalmente oculto el list-style-type y uso una imagen de fondo, que es movible

li 
{
    background: url(/Images/arrow_icon.gif) no-repeat 7px 7px transparent;
    list-style-type: none;
    margin: 0;
    padding: 0px 0px 1px 24px;
    vertical-align: middle;
}

El "7px 7px" es lo que alinea la imagen de fondo dentro del elemento y también es relativo al relleno.

Una posible solución a esta pregunta que aún no se mencionó es la siguiente:

    li {
        position: relative;
        list-style-type: none;
    }

    li:before {
        content: "";
        position: absolute;
        top: 8px;
        left: -16px;
        width: 8px;
        height: 8px;
        background-image: url('your-bullet.png');
    }

Ahora puede usar la parte superior/izquierda del li:before para posicionar la nueva viñeta. Tenga en cuenta que el ancho y el alto del li:before deben tener las mismas dimensiones que la imagen de fondo que elija. Esto funciona en Internet Explorer 8 y arriba.

Tenía el mismo problema, pero no podía usar la opción de fondo (y no quería usar múltiples fondos), así que pensé en otra solución

Este es un ejemplo para un menú que tiene un indicador cuadrado para el elemento de menú activo/actual (el estilo de lista predeterminado se establece en ninguno en otra regla)

nav ul li.active>a:before{
    content: "■";
    position: absolute;
    top: -22px;
    left: 55px;
    font-size: 33px;

}

Crea un cuadrado usando un carácter cuadrado con la pseudo clase": before" y es libremente posicionable mediante el uso de posicionamiento absoluto.

Esto es lo que hice para que los pequeños bloques grises estuvieran en el lado izquierdo y en el centro del texto con una altura de línea aumentada:

line-height:200%;
padding-left:13px;
background-image:url('images/greyblock.gif');
background-repeat:no-repeat;
background-position:left center;

Espero que esto ayude a alguien: D

La solución que decidí al final fue modificar la imagen para añadir un poco de espaciado.

Usar una imagen de fondo en la li como algunos sugieren funciona en muchos casos, pero falla cuando la lista se usa junto con una imagen flotante (por ejemplo, para que el texto se ajuste a la imagen).

Espero que esto ayude.

O puede usar

list-style-position: inside;

Otra opción que puedes hacer es la siguiente:

li:before{
    content:'';
    padding: 0 0 0 25px;
    background:url(../includes/images/layouts/featured-list-arrow.png) no-repeat 0 3px;
}

Use (0 3px) para posicionar la imagen de la lista.

Funciona en IE8+, Chrome, Firefox y Opera.

Uso esta opción porque puede cambiar fácilmente el estilo de lista y es muy probable que ni siquiera tenga que usar una imagen. (violín abajo)

Http://jsfiddle.net/flashminddesign/cYAzV/1 /

ACTUALIZACIÓN:

Esto dará cuenta del texto / contenido que entra en la segunda línea:

ul{ 
    list-style-type:none;
}

li{
    position:relative;
}

ul li:before{
    content:'>';
    padding:0 10px 0 0;
    position:absolute;
    top:0; left:-10px;
}

Añade padding-left: a la li si quieres más espacio entre la viñeta y el contenido.

Http://jsfiddle.net/McLeodWebDev/wfzwm0zy /

Creo que lo que realmente desea hacer es agregar el relleno (que está agregando actualmente a la

Como una respuesta de "darren" pero una modificación menor

li 
{
background: url("images/bullet.gif") left center no-repeat;
padding-left: 14px;
margin-left: 24px;
}

Funciona cross browser, basta con ajustar el relleno y el margen

Editar para anidados: agregue este estilo para agregar margin-left a la lista sub-anidada

Ul ul{ margin-left: 15px;}

Encuentro que la respuesta aceptada es un poco confusa, demasiado debe empujarse con relleno adicional y comandos CSS.

Nunca agrego relleno a los elementos de la lista personalmente, normalmente controlando su altura de línea y el margen ocasional es suficiente.

Cuando tengo un problema de alineación con imágenes de estilo de lista personalizadas, solo añado un píxel o dos de espacio adicional alrededor de cualquier lado que se requiera para ajustar su posición relativa a cada línea de lista.

Solución con fontawesome

#polyNedir ul li { position:relative;padding-left:20px }
#polyNedir ul li:after{font-family:fontawesome;content:'\f111';position:absolute;left:0px;top:3px;color:#fff;font-size:10px;}