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

169

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

datisdesign
fuente
1
Es realmente una pena que esto todavía no esté incluido en la especificación CSS. ¿Qué punto es un list-style-imagesi no se puede colocar? Parece que, como resultado, la mayoría de las personas están usando soluciones alternativas como ::beforey en su background-imagelugar.
Mentalista

Respuestas:

205

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.

un darren
fuente
1
Esto colocará el estilo de la lista un poco más a la derecha que los elementos normales de la lista, que está un poco "desactivado" si hay algunos normales debajo. No conozco la solución independiente, pero dependiendo del ancho de su imagen, esto mejorará eso: "margen: 0 0 0 -7px;"
e-motiv
Para el posicionamiento superior, el cambio de topvalor funcionó para mí en lugar del relleno superior. background: url(images/bullet.gif) no-repeat left 8px;
Sridhar Katakam
Es una verdadera lástima que no puedas diseñar el estilo de lista directamente. Hace que las personas usen todo tipo de soluciones alternativas. Realmente preferiría usar el estilo de lista para algo que realmente sea un estilo de lista, pero no puedo hacer que se vea como quiero.
mcv
75

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.

NickGPS
fuente
21

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.

Ramon de Jesus
fuente
Esta es la mejor solución en mi opinión. Si flota el pseudo-elemento :: before a la izquierda, obtendrá el mismo efecto.
TaylorMac
12

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.

lad1337
fuente
8

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

kaed
fuente
6

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.

zeds
fuente
6

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/

McLeodWebDev
fuente
1
la versión actualizada abordará la línea adicional JSfiddle
McLeodWebDev
6

O puedes usar

list-style-position: inside;
Mathias Maes
fuente
3

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.


fuente
3

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

khaled_webdev
fuente
3

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.

jj
fuente
0

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.

AdamJones
fuente
Nunca ha tenido que lidiar con el renderizado entre navegadores, ¿verdad?
Volker E.
0

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;}
Fatih Topcu
fuente
0

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>

Ronnie Royston
fuente
0

My solution:

ul {
    line-height: 1.3 !important;
    li {
        font-size: x-large;
        position: relative;
        &:before {
            content: '';
            display: block;
            position: absolute;
            top: 5px;
            left: -25px;
            height: 23px;
            width: 23px;
            background-image: url(../img/list-char.png) !important;
            background-size: 23px;
            background-repeat: no-repeat;
        }
    }
}

Bartłomiej Kuźniar
fuente