Ajuster la position de l’image de style de liste?

Est-il possible d’ajuster la position de liste-style-image?

Lorsque j’utilise le remplissage pour les éléments de la liste, l’image rest à sa position et ne bouge pas avec le remplissage …

Pas vraiment. Votre remplissage est (probablement) appliqué à l’élément de liste, il n’affectera donc que le contenu réel de l’élément de liste.

L’utilisation d’une combinaison de styles d’ arrièreplan et de remplissage peut créer quelque chose qui ressemble à celui-ci, par exemple

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

Vous cherchez peut-être à append un style au conteneur de liste parent (ul) pour positionner vos éléments de liste à puces, cet article A List Apart a une bonne référence de départ.

Je cache normalement le type liste-style et utilise une image d’arrière-plan, qui est mobile

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

Le “7px 7px” est ce qui aligne l’image de fond à l’intérieur de l’élément et est également relative au remplissage.

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

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

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

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

Ceci est un exemple pour un menu qui a un carré comme indicateur pour l’élément de menu actif / actuel (le style de liste par défaut est défini sur aucun dans une autre règle)

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

il crée un carré en utilisant un caractère carré avec la pseudo-classe “: before” et il est librement positionnable en utilisant un positionnement absolu.

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

 line-height:200%; padding-left:13px; background-image:url('images/greyblock.gif'); background-repeat:no-repeat; background-position:left center; 

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

La solution que j’ai choisie à la fin consistait à modifier l’image elle-même pour append un certain espacement.

L’utilisation d’une image d’arrière-plan sur le li comme une suggestion fonctionne dans de nombreux cas, mais échoue lorsque la liste est utilisée à côté d’une image flottante (par exemple, pour que le texte entoure l’image).

J’espère que cela t’aides.

Ou vous pouvez utiliser

 list-style-position: inside; 

Une autre option que vous pouvez faire est la suivante:

 li:before{ content:''; padding: 0 0 0 25px; background:url(../includes/images/layouts/featured-list-arrow.png) no-repeat 0 3px; } 

Utilisez (0 3px) pour positionner l’image de la liste.

Fonctionne dans IE8 +, Chrome, Firefox et Opera.

J’utilise cette option car vous pouvez échanger facilement le style de liste et avoir une chance de ne pas avoir à utiliser d’image. (violon ci-dessous)

http://jsfiddle.net/flashminddesign/cYAzV/1/

METTRE À JOUR:

Cela tiendra compte du texte / contenu entrant dans la deuxième ligne:

 ul{ list-style-type:none; } li{ position:relative; } ul li:before{ content:'>'; padding:0 10px 0 0; position:absolute; top:0; left:-10px; } 

Ajouter padding-left: au li si vous voulez plus d’espace entre la puce et le contenu.

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

Je pense que ce que vous voulez vraiment faire, c’est append le remplissage (que vous ajoutez actuellement au

  • ) à la balise
      et les points de la balle se déplaceront avec le texte du

    • .
  • Il y a aussi la position de style de liste que vous pouvez examiner. Cela affecte la manière dont les lignes entourent les images de puce.

    comme “a darren” réponse mais modification mineure

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

    il fonctionne à travers le navigateur, il suffit de régler le remplissage et la marge

    Modifier pour nested: ajoutez ce style pour append une marge à gauche à la liste sous-nestede

    ul ul {margin-left: 15px; }

    Je trouve que la réponse acceptée est un peu un fudge, beaucoup trop doit se battre avec des commandes de remplissage et de css supplémentaires.

    Je n’ajoute jamais de rembourrage pour lister les éléments personnellement, en contrôlant normalement leur hauteur de ligne et la marge occasionnelle est suffisante.

    Lorsque je suis confronté à un problème d’alignement avec des images de style de liste personnalisées, il me suffit d’append un pixel ou deux d’espace supplémentaire autour du côté requirejs pour ajuster sa position par rapport à chaque ligne de liste.

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