[HTML/CSS] Espace sur les liste
GallyNet
Messages postés
437
Statut
Membre
-
alexgille -
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:
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
A voir également:
- Espace en html
- Espace insécable - Guide
- Espace de stockage gmail plein - Guide
- Editeur html - Télécharger - HTML
- Espace stockage google - Guide
- Html br - Forum HTML
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!
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!
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.
<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.
