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

¿Hay alguna manera de ajustar la posición de list-style-image?

Cuando uso el relleno para los elementos de la lista, la imagen permanecerá en su posición y no se moverá con el relleno ...

Realmente no. Su relleno (probablemente) se aplica al elemento de la lista, por lo que solo afectará el contenido real dentro del elemento de la lista.

El uso de una combinación de fondo y estilos de relleno puede crear algo similar, por ejemplo

li {
  background: url(images/bullet.gif) no-repeat left top; /* <-- change `left` & `top` too for extra control */
  padding: 3px 0px 3px 10px;
  /* reset styles (optional): */
  list-style: none;
  margin: 0;
}

Es posible que desee agregar estilo al contenedor de la lista principal (ul) para colocar los elementos de la lista con viñetas, este artículo de A List Apart tiene una buena referencia inicial.

Normalmente oculto el tipo de estilo de lista 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 de li: before para colocar la nueva viñeta. Tenga en cuenta que el ancho y la altura de li: before deben ser las mismas dimensiones que la imagen de fondo que elija. Esto funciona en Internet Explorer 8 y superior.

Tuve el mismo problema, pero no pude usar la opción de fondo (y no quería usar varios 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 no está configurado 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 se puede posicionar libremente usando un 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 mayor altura de línea:

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 en sí para agregar un poco de espacio.

El uso de 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.

Otra opción que puede 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.

Utilizo 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/

ACTUALIZAR:

Esto tendrá en cuenta el 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;
}

Agregue relleno-izquierda: a la li si desea más espacio entre la viñeta y el contenido.

http://jsfiddle.net/McLeodWebDev/wfzwm0zy/

O puedes usar

list-style-position: inside;

Creo que lo que realmente desea hacer es agregar el relleno (actualmente está agregando a <li>) a la etiqueta <ul> y luego los puntos de viñeta se moverán con el texto de <li>.

También está la posición de estilo de lista en la que podrías mirar. Afecta cómo las líneas se envuelven alrededor de las imágenes de viñetas.

como "una respuesta" pero una modificación menor

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

funciona en varios navegadores, solo ajusta el relleno y el margen

Editar para anidado: agregue este estilo para agregar margen izquierdo a la lista sub-anidada

ul ul {margen-izquierda: 15px; }

Estoy usando algo como esto, me parece bastante limpio y simple:

ul { 
     list-style:  none;
     /* remove left padding, it's usually unwanted: */
     padding:  0;
}

li:before {
     content:  url(icon.png);
     display:  inline-block;
     vertical-align:  middle;

     /* If you want some space between icon and text: */
     margin-right:   1em;
}

El código anterior funciona como es en la mayoría de mis casos.
Para un ajuste exacto puede modificar vertical-align, por ejemplo:

vertical-align:  top;

/* or */
vertical-align:  -10px;

/* or whatever you need instead of "middle" */

Puede activar list-style: noneen lilugar de ulsi lo prefiere.

Encuentro la respuesta aceptada un poco fudge, demasiado debe empujar con relleno adicional y comandos css.

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

Cuando tengo un problema de alineación con imágenes de estilo de lista personalizadas, solo agrego un píxel o dos de espacio adicional alrededor del lado que sea necesario para ajustar su posición con respecto 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;}

Oculta la imagen de viñeta predeterminada y úsala background-imageya que tienes mucho más control como:

li {
    background-image: url(https://material.io/tools/icons/static/icons/baseline-add-24px.svg);
    background-repeat: no-repeat;
    background-position: left 50%;
    padding-left: 2em;
}

ul {
    list-style: none;
}

<ul>
<li>foo</li>
<li>bar</li>
</ul>