Comment puis-je réduire l'écart par défaut entre la puce et le texte dans une <li> ?
- Point 1
- Point 2
- Point 3
Je veux réduire l'écart entre la balle et le "je".
Il apporte le li en dehors de la div dans firefox
Réponses
Trop de publicités?
Steve Harrison
Points
31062
Je ne suis pas sûr que ce soit la meilleure façon de procéder, mais vous pourriez spécifier une valeur négative. text-indent :
li {
text-indent: -4px;
}...où votre code HTML ressemble :
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>(Testé dans Safari 4.0.4 et Firefox 3.0.11.)
J'ai compris j'utilise list-style-position:inside ; sur <ul> aussi et ta solution ne fonctionne pas avec mais fonctionne sans. et pourquoi j'utilise list-style-position:inside ; sur <ul> bcoz li bullets sortait de la div.
Le problème de l'indentation négative du texte (sur Chrome en tout cas) est que le contenu multi-lignes ne fonctionne pas - seule la première ligne est déplacée vers la gauche, mais les lignes suivantes conservent l'espacement par défaut.
gpmcadam
Points
2717
Vous pouvez y parvenir en définissant l'option list-style-type a none et en fixant le background-image d'un élément de liste à une balle générique, comme ceci :
ul {
list-style-type: none;
}
li {
background-image: url(bullet.jpg);
background-repeat: no-repeat;
background-position: 0px 50%;
padding-left: 7px;
}Le résultat ressemblerait un peu à ça :
Avec cette approche, vous n'ajoutez pas d'inutiles span (ou autres) à vos listes, ce qui est sans doute plus pratique (pour l'extensibilité ultérieure et d'autres raisons sémantiques).
Jaime Garcia
Points
1869
Vous pouvez essayer ce qui suit. Mais cela vous oblige à mettre un <span> à l'intérieur de l'élément <li> éléments
<html>
<head>
<style type="text/css">
ul.a li span{
position:relative;
left:-0.5em;
}
</style>
</head>
<body>
<ul class="a">
<li><span>Coffee</span></li>
<li><span>Tea</span></li>
<li><span>Coca Cola</span></li>
</ul>
</body>
</html>
Charles Wyke-Smith
Points
263
J'ai essayé ces solutions et d'autres proposées, qui ne fonctionnent pas vraiment, mais il semble que j'ai trouvé un moyen d'y parvenir, qui consiste à supprimer la puce et à utiliser le pseudo-élément :before pour mettre une puce Unicode à sa place. Vous pouvez ensuite ajuster l'espace entre l'élément de liste et la puce. Vous devez utiliser l'Unicode pour insérer une entité dans la propriété de contenu de :before ou :after - les entités HTML ne fonctionnent pas.
Un code de dimensionnement et de positionnement est également nécessaire, car la balle Unicode affiche par défaut la taille d'une tête d'épingle. La balle doit donc être agrandie et positionnée de manière absolue pour être mise en place. Notez l'utilisation de ems pour le dimensionnement et le positionnement de la puce afin que la relation entre la puce et l'élément de liste reste constante lorsque vous modifiez la taille de la police de l'élément de liste. Les commentaires du code expliquent comment tout cela fonctionne. Si vous souhaitez utiliser une entité différente, vous pouvez trouver une liste des entités Unicode ici :
http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/
Utilisez une valeur de la colonne d'extrême droite (octale) du tableau de cette page - vous avez juste besoin du numéro et de la lettre. Vous devriez pouvoir mettre à la poubelle tout ce qui n'est pas la propriété content de la règle :before lorsque vous utilisez les autres entités, car elles semblent s'afficher à une taille utilisable. Envoyez-moi un courriel à l'adresse suivante : charles at stylinwithcss dot com si vous avez des idées ou des commentaires. J'ai testé Firefox, Chrome et Safari et cela fonctionne bien.
body {
font-family:"Trebuchet MS", sans-serif;
}
li {
font-size:14px; /* set font size of list item and bullet here */
list-style-type:none; /* removes default bullet */
position:relative; /* positioning context for bullet */
}
li:before {
content:"\2219"; /* escaped unicode character */
font-size:2.5em; /* the default unicode bullet size is very small */
line-height:0; /* kills huge line height on resized bullet */
position:absolute; /* position bullet relative to list item */
top:.23em; /* vertical align bullet position relative to list item */
left:-.5em; /* position the bullet L- R relative to list item */
}
Huzzah ! (Bizarre, je ne pense pas avoir déjà dit ça auparavant. L'influence subconsciente des Simpsons se fait sentir.)
Très bien ! Un conseil pour les autres qui lisent ceci : si vous voulez utiliser un disque (contenu : " \2022 "), si vous supprimez les propriétés line-height et top de cette solution, elle semble mieux fonctionner. Par ailleurs, si vous souhaitez utiliser la propriété margin-left de l'élément parent ul pour repousser les éléments de votre liste vers l'intérieur, n'oubliez pas de la définir comme étant égale à la valeur de la propriété "left" du li multipliée par sa propriété "font-size" (et positive, bien sûr).
C'est la meilleure solution que j'ai vue sur le site jusqu'à présent ; elle évite les défauts et les incohérences de l'utilisation d'espaces dans les éléments de la liste avec une marge négative qui sont soumis à l'espacement natif de chaque navigateur ; et elle évite de devoir maintenir et charger une image malgré le contrôle qu'elle vous donne.
mark123
Points
830
0 votes
Veuillez également voir : stackoverflow.com/questions/6332873/