Comment puis-je positionner une image de style liste ?

Positionnement efficace de l'image de style liste

Question :

Existe-t-il un moyen d'ajuster la position de l'image utilisé comme puce dans une liste (list-style-image) ?

Réponse :

Non, il n'est pas possible d'ajuster directement la position de list-style-image. La raison en est que le remplissage appliqué aux éléments de la liste affecte principalement le contenu qu'ils contiennent, pas l'image.

Alternative Approche :

Pour obtenir un effet similaire, vous pouvez utiliser une combinaison de styles d'arrière-plan et de remplissage :

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

Cette méthode positionne l'image de la puce à l'aide du style d'arrière-plan et contrôle son espacement du texte à l'aide du remplissage.

Considérations :

Si vous souhaitez stylisez le conteneur de liste parent (ul) pour positionner les éléments de votre liste à puces, reportez-vous à l'article A List Apart mentionné dans la réponse fournie pour obtenir des conseils.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!