Pour résumer les autres réponses ici – si vous voulez plus de contrôle sur l'espace entre les puces et le texte en <li> élément de la liste, vos options sont les suivantes:
(1) Utiliser une image d'arrière-plan:
<style type="text/css">
li {
list-style-type:none;
background-image:url(bullet.png);
}
</style>
<ul>
<li>Some text</li>
</ul>
Avantages:
- Vous pouvez utiliser n'importe quelle image que vous voulez pour la puce
- Vous pouvez utiliser les CSS
background-position à la position de l'image assez beaucoup n'importe où vous voulez en ce qui concerne le texte, à l'aide de pixels, ems ou %
Inconvénients:
- Ajoute un supplément (bien que petit) fichier image à votre page, en augmentant le poids de la page
- Si un utilisateur augmente la taille du texte sur leur navigateur, la balle va rester à la taille d'origine. Elle va aussi probablement obtenir le plus loin de la position de la taille du texte augmente
- Si vous êtes l'élaboration d'un "réactif" mise en page en utilisant uniquement les pourcentages pour les largeurs, il pourrait être difficile d'obtenir la balle exactement où vous le souhaitez sur une plage de largeurs d'écran
2. L'utilisation de rembourrage sur l' <li> balise
<style type="text/css">
ul {padding-left:1em}
li {padding-left:1em}
</style>
<ul>
<li>Some text</li>
</ul>
Avantages:
- Pas d'image = 1 moins de fichiers à télécharger
- En ajustant le rembourrage sur l'
<li>, vous pouvez ajouter autant extra horizontale de l'espace entre la puce et le texte comme vous le souhaitez
- Si l'utilisateur augmente la taille du texte, l'espacement et la taille de la balle doit échelle proportionnellement
Inconvénients:
- Ne pouvez pas déplacer la balle plus près du texte que le navigateur par défaut
- Limité de formes et de tailles de CSS intégré dans la puce types
- Balle doit être de la même couleur que le texte
- Pas de contrôle sur le positionnement vertical de la balle
(3) le texte à la ligne dans une extra - <span> élément
<style type="text/css">
li {
padding-left:1em;
color:#f00; /* red bullet */
}
li span {
display:block;
margin-left:-0.5em;
color:#000; /* black text */
}
</style>
<ul>
<li><span>Some text</span></li>
</ul>
Avantages:
- Pas d'image = 1 moins de fichiers à télécharger
- Vous obtenez plus de contrôle sur la position de la balle qu'avec l'option (2) – vous pouvez le déplacer plus près du texte (bien que malgré tous mes efforts, il semble que vous ne pouvez pas modifier la position verticale par l'ajout d'
padding-top de la <span>. Quelqu'un d'autre peut avoir une solution de contournement pour ce faire, si...)
- La balle peut être une couleur différente pour le texte
- Si l'utilisateur augmente la taille du texte, la balle doit échelle de proportion (vous réglez le rembourrage et de la marge en ems ne px)
Inconvénients:
- Nécessite une unsemantic élément (ce sera probablement vous faire perdre plus d'amis sur ce qu'elle sera dans la vraie vie ;) mais c'est ennuyeux pour ceux qui aiment leur code pour être aussi efficace que possible, et il viole la séparation de la présentation et du contenu en HTML / CSS est censé offrir)
- Aucun contrôle sur la taille et la forme de la balle
Voici l'espoir d'une nouvelle liste de caractéristiques de style dans CSS4, nous pouvons créer plus intelligents balles sans avoir recours à des images ou des exta mark-up :)
