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


169

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


1
C'est vraiment dommage que cela ne soit toujours pas inclus dans la spécification CSS. Quel point est un list-style-images'il ne peut pas être positionné? Il semble qu'en conséquence la plupart des gens utilisent des solutions de contournement comme ::beforeet à la background-imageplace.
Mentalist

Réponses:


205

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.


1
Cela placera le style de liste un peu plus à droite que les éléments de liste normaux, ce qui est un peu "off" s'il y en a des normaux en dessous. Je ne connais pas la solution indépendante, mais en fonction de la largeur de votre image, cela améliorera cela: "margin: 0 0 0 -7px;"
e-motiv

Pour le positionnement supérieur, le changement de topvaleur a fonctionné pour moi au lieu du rembourrage supérieur. background: url(images/bullet.gif) no-repeat left 8px;
Sridhar Katakam

C'est vraiment dommage que vous ne puissiez pas styliser le style de liste directement. Cela oblige les gens à utiliser toutes sortes de solutions de contournement. Je préférerais vraiment utiliser le style liste pour quelque chose qui est vraiment un style liste, mais je ne peux pas lui donner l'apparence que je veux.
mcv

75

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.


21

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.


C'est la meilleure solution à mon avis. Si vous faites flotter le pseudo-élément :: before vers la gauche, vous obtenez le même effet.
TaylorMac

12

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.


8

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


6

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.


6

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/


1
la version mise à jour adressera la ligne supplémentaire JSfiddle
McLeodWebDev


3

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.


3

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


3

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.


0

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.


Vous n'avez jamais eu à gérer le rendu multi-navigateurs, n'est-ce pas?
Volker E.

0

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

0

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>


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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.