Réduire l'écart entre une puce et le texte d'un élément de la liste
Comment puis-je réduire l'écart par défaut entre un point et un texte dans un <li> ?
- Item 1
- article 2
- article 3
je veux réduire l'écart entre la balle et"I".
14 réponses
Je ne suis pas sûr que ce soit la meilleure façon de le faire, mais vous pouvez spécifier un négatif text-indent :
li {
text-indent: -4px;
}
...où ressemble votre code HTML:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
(testé dans Safari 4.0.4 et Firefox 3.0.11.)
vous pouvez y parvenir en réglant le list-style-type à none , et en réglant le background-image d'un élément de liste à une puce 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 à quelque chose comme ceci:
avec cette approche, vous n'ajoutez pas d'éléments inutiles span (ou autres) à vos listes, ce qui est sans doute plus pratique (pour une extensibilité ultérieure) et d'autres raisons sémantiques).
, Vous pouvez essayer ce qui suit. Mais il vous demande de mettre un élément <span> à l'intérieur des <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>
j'ai essayé ces solutions et d'autres offertes, qui ne fonctionnent pas réellement, mais je semble avoir trouvé un moyen de le faire, et qui est d'enlever la balle et d'utiliser le pseudo-élément avant de mettre une balle Unicode à sa place. Ensuite, vous pouvez ajuster l'espace entre l'élément de la liste et de la balle. Vous devez utiliser Unicode pour insérer une entité dans la propriété content de :before ou :after - HTML entities ne fonctionne pas.
il y a un code de positionnement et de dimensionnement nécessaire aussi, parce que la puce Unicode par défaut affiche la taille d'une tête d'épingle. Donc la balle doit être agrandie et absolument positionnée pour la mettre en place. Notez l'utilisation d'ems Pour la taille et le positionnement de la balle de sorte que la relation de la balle à l'élément de liste reste constante lorsque vous changez la taille de police de l'élément de liste. Les commentaires dans le code expliquent comment tout cela fonctionne. Si vous voulez 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 de droite (octal) du tableau sur cette page - vous avez juste besoin du \ et du nombre. Vous devriez être capable de trash everying sauf la propriété content de la règle :before lorsque vous utilisez les autres entités comme elles semblent s'afficher à une taille utilisable. Écrivez-moi: charles à stylinwithcss point com avec toutes les pensées/commentaires. Je l'ai testé Firefox, Chrome et Safari et ça marche 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:"19"; /* 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 */
}
si dans chaque li Vous n'avez qu'une ligne de texte, vous pouvez mettre un tiret de texte sur li. Comme ceci:
ul {
list-style: disc;
}
ul li {
text-indent: 5px;
}
ou
ul {
list-style: disc;
}
ul li {
text-indent: -5px;
}
C'est une façon.
li span {
margin-left: -11px;
}
<ul>
<li><span>1</span></li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
vous pourriez essayer d'utiliser:
li {list-style-position: inside; }
mais je ne me souviens pas si cela ajuste le espace , ou des changements où l'espace se produit .
Edité
ce qui précède ne semble pas faire de différence substantielle. Il ne semble pas y avoir de moyen de diminuer l'espace entre le marqueur list-style-type et le texte, bien qu'il peut être augmenté en utilisant margin-left ou text-indent .
Désolé je ne peux pas être plus utile.
Edité
juste par curiosité, pourquoi ne pas "simuler" la balle avec une image de fond?
ul {list-style-type: none;
margin: 0;
padding: 0;
}
ul li {background: #fff url(path/to/bullet-image.png) 0 50% no-repeat;
margin: 0;
padding: 0 0 0 10px; /* change 10px to whatever you feel best suits you */
}
Il pourrait permettre plus de peaufinage.
j'avais besoin de faire cela en ligne, et combiné quelques-uns des ci-dessus pour faire en sorte que cela fonctionne bien pour moi. Je travaille à l'intérieur d'un div et je voulais utiliser une image:
le rembourrage sous L'UL a dit à la balle où commencer à partir de la marge gauche de la div il est. J'utilise em pour une meilleure accessibilité / flexibilité, mais vous pouvez utiliser px aussi. S'il ne semble pas bouger beaucoup avec px, utilisez une valeur de px beaucoup plus grande (pour moi, il suffit de déplacer c'était dans un cm 60px!).
le texte-tiret indique à quel point la balle est proche du texte à côté.
Espérons que cela fonctionne pour vous! :)
réduire text-indent à un nombre négatif pour réduire l'espace entre la puce de l'élément de la liste et son texte.
li {
text-indent: -4px;
}
vous pouvez également utiliser margin-left pour ajuster n'importe quel espace entre la puce de l'article de liste et le bord de son élément environnant.
li {
margin-left: 24px;
}
les deux text-indent et padding-left peuvent ajouter espace entre la puce et le texte, mais seulement text-indent peut réduire l'espace à négatif.
j'ai <a> à l'intérieur de la <li> .
aux éléments <ul> , appliquer le CSS suivant:
ul {
margin: 0;
padding: 0;
list-style: none;
}
aux éléments <a> , appliquer le CSS suivant:
a:before {
content: "";
height: 6px;
width: 6px;
border-radius: 50%;
background: #000;
display: inline-block;
margin: 0 6px 0 0;
vertical-align: middle;
}
Cela crée des pseudo-éléments pour les balles. Ils peuvent être coiffés comme tous les autres éléments.
Je l'ai implémenté ici: http://www.cssdesk.com/R2AvX
Ici, Vous Allez avec le Violon:
VIOLON
HTML:
<ol>
<li>List 1
<ol>
<li>Sub-Chapter</li>
<li>Sub-Chapter</li>
</ol>
</li>
<li>List 2
<ol>
<li>Sub-Chapter</li>
<li>Sub-Chapter</li>
</ol>
</li>
<li>List 3</li>
</ol>
CSS:
ol {counter-reset:item;}
ol li {display:block;}
li:before {content:counters(item, ".");counter-increment:item;left:-7px;position:relative;font-weight:bold;}
Voici comment faire.
Multi-line fonctionne parfaitement si vous le faites de cette façon. Balle automatiquement la taille du texte. Le tiret est droit: c'est juste le padding-left sur le li . Minimes CSS nécessaire.
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul > li {
position: relative;
padding-left: 12px;
}
ul > li:before {
content: "•";
position: absolute;
left: 0;
}
div {
border: 1px solid #ccc;
}<div>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, explicabo iste numquam dolorem harum natus! Voluptate magni expedita, eaque voluptates, aliquam maiores vel quia repellat a ipsum possimus eveniet, blanditiis.</li>
<li>Repudiandae repellendus laboriosam, odio vero debitis non quisquam provident deserunt, ratione facilis suscipit delectus sunt aliquid, in maxime autem optio, exercitationem iusto fugiat itaque omnis assumenda est a praesentium? Natus?</li>
<li>Voluptatem, distinctio, eius, soluta, atque laboriosam tempora magnam sequi saepe architecto accusamus hic facilis! Tenetur, necessitatibus. Ut ipsam, officia omnis obcaecati vero consectetur vel similique nam consequatur quidem at doloremque.</li>
</ul>
</div> pour réaliser le look que je voulais, j'ai fait un div contenant un UL de base et plusieurs LIs. Je n'ai pas pu facilement ajuster le tiret entre la puce et le texte avec l'une des idées suggérées ci-dessus (techniquement possible, mais pas simple.) Je viens de quitter les UL et LI sans aucune fonction de listing ( list-style-type: none ), puis j'ajoute un • au début de chaque ligne. Elle m'a donné un peu de mal au début, il ne s'affiche le premier point, j'ai donc ajouté une puce à la fin de la première la ligne, rafraîchie, puis retirée et elles sont toutes apparues. Il suffit d'ajouter manuellement une entité HTML bullet si vous ne voulez pas un énorme tiret, ajouter des entités HTML space si vous voulez plus d'Espace :o je sais que ce n'est pas la meilleure méthode, mais cela a fonctionné pour moi.
Voici encore une autre façon.
- ajouter deux divs à chaque li, Une pour la puce, une pour le texte.
- mettez un caractère de balle
•(ou ce que vous voulez, Unicode a beaucoup) dans le div de balle. Mettez le texte dans le texte div. - fixe chaque li à
display:flex.
Pour:
- Sans supplément de balle d'une image à ajouter.
- pas de marges négatives ou quoi que ce soit, ne sort pas de parent.
- fonctionne sur tout navigateur qui supporte flexbox.
- indentation appropriée des articles multilignes.
- l'utilisation du caractère de la balle signifie que la balle sera toujours alignée verticalement avec le texte, sans modifications nécessaires.
Inconvénients:
- nécessite des éléments supplémentaires.
aussi, si vous ne voulez pas coder toutes les divs supplémentaires, vous pouvez juste faire une liste normale et puis exécuter cette fonction pour la transformer, en passant votre ul comme paramètre:
function fixList (theList) {
theList.find('li').each(function (_, li) {
li = $(li);
$('<div/>').html(li.html()).appendTo(li.empty());
$('<div/>').text('•').prependTo(li);
});
}
exemple:
li {
font-family: sans-serif;
list-style-type: none;
display: flex;
}
li > div:first-child {
margin-right: 0.75ex; /* set to desired spacing */
}<ul>
<li><div>•</div><div>First list item.</div>
<li><div>•</div><div>Second list item.<br>It's on two lines.</div>
<li><div>•</div><div>Third <i>list</i> item.</div>
</ul>voici un exemple d'utilisation de la fonction:
fixList($('ul'));
function fixList (theList) {
$('li', theList).each(function (_, li) {
li = $(li);
$('<div/>').html(li.html()).appendTo(li.empty());
$('<div/>').text('•').prependTo(li);
});
}li {
font-family: sans-serif;
list-style-type: none;
display: flex;
}
li > div:first-child {
margin-right: 0.75ex;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>First list item.
<li>Second list item.<br>It's on two lines.
<li>Third <i>list</i> item.
</ul>