Ajuster la position de l'image de style de liste?
Est-il possible d'ajuster la position de list-style-image?
Lorsque j'utilise le remplissage pour les éléments de la liste, l'image reste à sa position et ne bouge pas avec le remplissage ...
Pas vraiment. Votre remplissage est (probablement) en train d'être appliqué à l'élément de liste, donc n'affectera que le contenu réel de l'élément de liste.
L'utilisation d'une combinaison de styles arrière-plan et remplissage peut créer quelque chose de similaire, 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 souhaitez 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 de liste et utilise une image d'arrière-plan, qui est déplaçable.
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 aussi 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: avant pour positionner la nouvelle puce. Notez que la largeur et la hauteur de li: before doivent avoir les mêmes dimensions que l’image de fond choisie. 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 none 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" Il est librement positionnable en utilisant le positionnement absolu.
Voici ce que j'ai fait pour que les petits blocs gris se trouvent à 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 retenue à la fin était de modifier l’image elle-même pour ajouter de l’espacement.
L'utilisation d'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 soit placé autour de 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 la liste d’images.
Fonctionne dans IE8 +, Chrome, Firefox et Opera.
J'utilise cette option parce que vous pouvez échanger facilement le style liste et qu'il y a de bonnes chances que vous n'ayez même pas besoin d'utiliser une image. (violon ci-dessous)
http://jsfiddle.net/flashminddesign/cYAzV/1/
METTRE À JOUR:
Ceci 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.
Je pense que ce que vous voulez vraiment faire est d’ajouter le remplissage (vous ajoutez actuellement au <li>) à la balise <ul> et ensuite les points de la balle 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 manière dont les lignes entourent les images de la balle.
comme "un darren" réponse mais modification mineure
li
{
background: url("images/bullet.gif") left center no-repeat;
padding-left: 14px;
margin-left: 24px;
}
cela fonctionne à travers le navigateur, ajustez simplement le remplissage et la marge
Éditer pour imbriqué: Ajouter ce style pour ajouter une marge gauche à la liste sous-imbriquée
ul ul {margin-left: 15px; }
Je trouve la réponse acceptée un peu fudge, mais il faut aussi se bousculer avec des commandes supplémentaires de remplissage et de commande CSS.
Je n’ajoute jamais de remplissage aux éléments de la liste personnellement, en contrôlant normalement la hauteur de la ligne et la marge occasionnelle étant suffisante.
Lorsque j'ai un problème d'alignement avec des images de style liste personnalisées, j'ajoute simplement un pixel ou deux d'espace supplémentaire autour de tout côté requis pour ajuster sa position par rapport à chaque ligne de la liste.
Cachez l'image par défaut et utilisez background-image car 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>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;}