[HTML/CSS] Espace sur les liste

Fermé
GallyNet Messages postés 434 Date d'inscription mardi 1 juin 2004 Statut Membre Dernière intervention 15 décembre 2008 - 31 mars 2005 à 15:22
 alexgille - 10 août 2010 à 11:59
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:
<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!
2
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.
1
J'ai le même problème ce n'est pas possible ?
0
Enax Messages postés 203 Date d'inscription lundi 11 février 2008 Statut Membre Dernière intervention 16 mars 2010 145
15 févr. 2008 à 16:22
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>
0
utilise plutot

<style type="text/css">
li span
{
margin-left: -5px;
}
</style>

pour le style du span, sinon tu risque d'avoir des soucis au scroll.
0
Passarinho44 Messages postés 963 Date d'inscription mercredi 28 mai 2008 Statut Contributeur Dernière intervention 13 juin 2012 132 > yoh101
7 août 2009 à 16:10
Tu as détéré un sujet d'un an et demi mais c'est gentil de préciser ^^
0