Ajuster la position de l'image du style de liste?

Existe-t-il un moyen d'ajuster la position de l'image de style de liste?

Lorsque j'utilise le remplissage pour les éléments de liste, l'image restera à sa position et ne bougera 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ère - plan et de remplissage peut créer quelque chose qui ressemble 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 à ajouter 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 de style liste et j'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 d'arrière-plan à l'intérieur de l'élément et est également relatif 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: before pour 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 de menu qui a un indicateur en forme de carré 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 le positionnement absolu.

Voici ce que j'ai fait pour que de petits blocs gris soient sur le côté gauche et au centre du texte avec une hauteur de ligne augmentée:

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 était de modifier l'image elle-même pour ajouter un espacement.

Utiliser une image d'arrière-plan sur le li comme certains le suggèrent 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 s'enroule autour de l'image).

J'espère que cela t'aides.

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 facilement changer de style de liste et il est fort probable que vous n'ayez même pas à utiliser une image du tout. (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;
}

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

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

Ou vous pouvez utiliser

list-style-position: inside;

Je pense que ce que vous voulez vraiment faire est d'ajouter le rembourrage (que vous ajoutez actuellement au <li>) à la balise <ul>, puis les puces se déplaceront avec le texte du <li>.

Il y a aussi la position de style de liste que vous pourriez examiner. Cela affecte la façon dont les lignes s'enroulent autour des images de puces.

comme la réponse «un darren» mais une modification mineure

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

cela fonctionne dans plusieurs navigateurs, ajustez simplement le remplissage et la marge

Modifier pour imbriqué: ajoutez ce style pour ajouter une marge gauche à la liste sous-imbriquée

ul ul {marge gauche: 15px; }

J'utilise quelque chose comme ça, cela me semble assez propre et 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;
}

Le code ci-dessus fonctionne tel quel dans la plupart de mes cas.
Pour un ajustement précis, vous pouvez modifier vertical-align, par exemple:

vertical-align:  top;

/* or */
vertical-align:  -10px;

/* or whatever you need instead of "middle" */

Vous pouvez activer list-style: noneau lilieu de ulsi vous préférez.

Je trouve la réponse acceptée un peu fudge, bien trop doit être bousculée avec un rembourrage supplémentaire et des commandes css.

Je n'ajoute jamais de remplissage aux éléments de liste personnellement, contrôlant normalement leur hauteur de ligne et la marge occasionnelle suffit.

Lorsque j'ai un problème d'alignement avec des images de style de liste personnalisées, j'ajoute simplement un pixel ou deux d'espace supplémentaire autour de n'importe quel côté requis 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;}

Cachez l'image de puce par défaut et utilisez background-imagecar vous avez beaucoup plus de contrôle comme:

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>