css - type - Ajustar la posición de la imagen de estilo de lista?

propiedades para listas en css

Question

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

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

Answer 1

Creo que lo que realmente quieres hacer es agregar el relleno (actualmente estás agregando al <li>) a la etiqueta <ul> y luego los puntos se moverán con el texto del <li>.

También está la posición de estilo de lista que podría examinar. Afecta la forma en que las líneas envuelven las imágenes de bala.

Answer 2

Encuentro que la respuesta aceptada es un poco fudge, también debo empujar con relleno extra y comandos css.

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

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

Answer 3

Esto es lo que hice para que los bloques grises pequeños estén en el lado izquierdo y en el centro del texto con un aumento de 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

Answer 4

La solución que establecí al final fue modificar la imagen en sí para agregar algo de espacio.

Usar una imagen de fondo en el 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 alrededor de la imagen).

Espero que esto ayude.

Answer 5

Normalmente escondo 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 relativa al relleno.

Answer 6

O puedes usar

list-style-position: inside;

Answer 7

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 colocar 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 explicará 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 a la izquierda: al límite si desea más espacio entre la viñeta y el contenido.

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

Answer 8

Realmente no. Su relleno (probablemente) se aplicará 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 estilos de fondo y relleno puede crear algo que se ve 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 lista principal (ul) para colocar los elementos de la lista con viñetas, este artículo de A List Apart tiene una buena referencia de inicio.

Answer 9

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

este es un ejemplo para un menú que tiene un indicador de tipo cuadrado para el elemento de menú activo / actual (el estilo de lista predeterminado está establecido en ninguno en otra regla)

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

}

crea un cuadrado mediante el uso de un carácter cuadrado con la pseudoclase ": before" y es libremente posicionable mediante el uso de posicionamiento absoluto.

Answer 10

Una posible solución a esta pregunta que no se mencionó aún 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: antes de colocar la nueva viñeta. Tenga en cuenta que el ancho y la altura del li: before deben ser de las mismas dimensiones que la imagen de fondo que elija. Esto funciona en Internet Explorer 8 en adelante.

Answer 11

como una respuesta "a regañadientes" pero una modificación menor

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

funciona a través del navegador, solo ajusta el relleno y el margen

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

ul ul {margin-left: 15px; }

Answer 12

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