Ajustez la position de l’image de style liste

Question

est-il possible de régler la position de list-style-image ? Lorsque j’utilise la marge intérieure d’éléments de liste, l’image restera à son poste et la coutume déménagement avec rembourrage...

Answer 1

Pas vraiment. Votre rembourrage est (probablement) être appliquée à l'élément de liste, de sorte affectera seulement le contenu réel à l'intérieur de l'élément de la liste.

En utilisant une combinaison de l' arrière-plan et du remplissage des styles peut créer quelque chose qui ressemble par exemple

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

Vous pourriez être à la recherche d'ajouter un style à la liste des parents conteneur (ul) de la position de votre liste à puces des éléments de liste, cette Liste, en dehors de l'article a une bonne base de référence.

Answer 2

Normalement, j’ai cacher le list-style-type et utiliser une image d’arrière-plan qui est mobile

Le « 7px 7px » est ce qui aligne l’image d’arrière-plan à l’intérieur de l’élément et est aussi par rapport à la marge intérieure.

Answer 3

Une solution possible à cette question qui n’a pas été mentionnée encore est la suivante :

Vous pouvez maintenant utiliser le haut/gauche de la li : avant de positionner la nouvelle balle. Notez que la largeur et la hauteur de la li : avant doivent avoir les mêmes dimensions que l’image d’arrière-plan vous choisissez. Cela fonctionne dans Internet Explorer 8 ou plus.

Answer 4

J’ai eu le même problème, mais je ne pouvais pas utiliser l’option d’arrière-plan (et ne voulait pas utiliser plusieurs arrière-plans) alors j’ai pensé à une autre solution

Il s’agit d’un exemple pour un menu a un carré comme indicateur pour l’élément de menu actif/courant (le style de liste par défaut est défini sur none dans une autre règle)

Il crée un carré en utilisant un caractère carré avec le « : avant de » pseudo classe et il est librement orientables en utilisant le positionnement absolu.

Answer 5

Voici ce que j’ai fait pour obtenir de petits blocs gris sur le côté gauche et au centre du texte présentant une lineheight accrue :

J’espère que cela aide quelqu'un :D