[HTML/CSS] Espace sur les liste

GallyNet Messages postés 434 Date d'inscription   Statut Membre Dernière intervention   -  
 alexgille -
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
A voir également:

4 réponses

alexgille
 
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
GrosMyto
 
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
xhtml
 
J'ai le même problème ce n'est pas possible ?
0
Enax Messages postés 203 Date d'inscription   Statut Membre Dernière intervention   145
 
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
yoh101
 
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   Statut Contributeur Dernière intervention   132 > yoh101
 
Tu as détéré un sujet d'un an et demi mais c'est gentil de préciser ^^
0