[HTML/CSS] Espace sur les liste
Est-ce que quelqu'un sait comment on fait pour changer l'espacement entre une puce et le texte dans une balise <li> ?
Pour expliquer un peu mieux ce que je veut, je vais faire un dessin:
imaginons que j'utilise les valeurs par défaut pour le code suivant:
il sera afficher comme suit:
mais moi je voudrais que ce soit:
Pour expliquer un peu mieux ce que je veut, je vais faire un dessin:
imaginons que j'utilise les valeurs par défaut pour le code suivant:
<li>premier element</li> <li>second element</li>
il sera afficher comme suit:
- premier element - second element
mais moi je voudrais que ce soit:
- premier element - second element
4 réponses
-
Salut.
En réalité il est impossible de changer concrètement la distance en la puce et le texte qui lui est associé.
Parcontre tu peux essayer le style list-style-position que tu mettras en inside ou en outside.
Il existe aussi un contournement de ce problème. En gros tu met une puce personnalisée en background de ton <li> :
.mon_li {
list-style: none;
background: url("mapuce.gif");
background-repeat: no-repeat;
background-position: 2px 2px; /* La première valeur est celle des x et la deuxième celle des y (ou vice-versa) */
padding: 2px;
}
En modifiant la position de ton background (ta puce) et le padding de ton <li>, tu pourras obtenir exactement le même effet d'une puce avant le texte. Et là au moins tu pourras la placer exactement où tu veux.
Voili voilou! -
J'ai le même problème ce n'est pas possible ?
-
Il suffit de changer la valeur de left :
<style type="text/css"> li span { position: relative; left: -5px; } </style> <ul> <li><span>ligne 1</span></li> <li><span>ligne 2</span></li> </ul>-
-
Contributeur@yoh101Tu as détéré un sujet d'un an et demi mais c'est gentil de préciser ^^
-
-
Hmm bof, les marges négatives ne sont pas conseillés du tout.
<style type="text/css">
li
{
margin:0px (ou le nombre que tu veux)
}
</style>
<ul>
<li>ligne 1</li>
<li>ligne 2</li>
</ul>
Devrait suffire.
