Comment personnaliser les numéros d’une liste ordonnée ?
https://stackoverflow.com/questions/10877
-
08-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Comment puis-je aligner à gauche les nombres dans une liste ordonnée ?
1. an item
// skip some items for brevity
9. another item
10. notice the 1 is under the 9, and the item contents also line up
Changer le caractère après le numéro dans une liste ordonnée ?
1) an item
Existe-t-il également une solution CSS pour passer des nombres aux listes alphabétiques/romaines au lieu d'utiliser l'attribut type sur l'élément ol.
Je suis principalement intéressé par les réponses qui fonctionnent sur Firefox 3.
La solution
C'est la solution que j'utilise dans Firefox 3, Opera et Google Chrome.La liste s'affiche toujours dans IE7 (mais sans le crochet fermant et les nombres alignés à gauche) :
ol {
counter-reset: item;
margin-left: 0;
padding-left: 0;
}
li {
display: block;
margin-bottom: .5em;
margin-left: 2em;
}
li::before {
display: inline-block;
content: counter(item) ") ";
counter-increment: item;
width: 2em;
margin-left: -2em;
}<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine<br>Items</li>
<li>Ten<br>Items</li>
</ol>MODIFIER: Correction de plusieurs lignes incluse par Strager
Existe-t-il également une solution CSS pour passer des nombres aux listes alphabétiques/romaines au lieu d'utiliser l'attribut type sur l'élément ol.
Faire référence à type de style de liste Propriété CSS.Ou lors de l'utilisation de compteurs, le deuxième argument accepte une valeur de type liste.Par exemple, ce qui suit utilisera le romain supérieur :
li::before {
content: counter(item, upper-roman) ") ";
counter-increment: item;
/* ... */
Autres conseils
Le CSS pour les listes de style est ici, mais en gros c'est :
li {
list-style-type: decimal;
list-style-position: inside;
}
Cependant, la mise en page spécifique que vous recherchez ne peut probablement être obtenue qu'en plongeant dans les entrailles de la mise en page avec quelque chose comme ce (notez que je ne l'ai pas réellement essayé) :
ol { counter-reset: item }
li { display: block }
li:before { content: counter(item) ") "; counter-increment: item }
Vous pouvez également spécifier vos propres numéros dans le HTML - par ex.si les numéros sont fournis par une base de données :
<ol>
<li seq="1">Item one</li>
<li seq="20">Item twenty</li>
<li seq="300">Item three hundred</li>
</ol>
Le seq L'attribut est rendu visible à l'aide d'une méthode similaire à celle donnée dans d'autres réponses.Mais au lieu d'utiliser content: counter(foo), nous utilisons content: attr(seq):
ol {
list-style: none;
}
ol > li:before {
content: attr(seq) ". ";
}
J'ai volé beaucoup de cela à d'autres réponses, mais cela fonctionne dans FF3 pour moi.Il a upper-roman, une indentation uniforme, une parenthèse proche.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<style type="text/css">
<!--
ol {
counter-reset: item;
margin-left: 0;
padding-left: 0;
}
li {
margin-bottom: .5em;
}
li:before {
display: inline-block;
content: counter(item, upper-roman) ")";
counter-increment: item;
width: 3em;
}
-->
</style>
</head>
<body>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
</ol>
</body>
</html>
Je suggère de jouer avec l'attribut :before et de voir ce que vous pouvez réaliser avec.Cela signifiera que votre code est vraiment limité aux nouveaux navigateurs sympas et exclut la section (ennuyeuse) du marché qui utilise encore de vieux navigateurs inutiles,
Quelque chose comme ce qui suit, qui force un correctif sur les éléments.Oui, je sais que c'est moins élégant de devoir choisir soi-même la largeur, mais utiliser CSS pour votre mise en page, c'est comme un travail de police infiltré :aussi bonnes que soient vos motivations, cela devient toujours compliqué.
li:before {
content: counter(item) ") ";
counter-increment: item;
display: marker;
width: 2em;
}
Mais vous devrez expérimenter pour trouver la solution exacte.
Les nombres s'alignent mieux si vous ajoutez des zéros non significatifs aux nombres, en définissant type de style de liste à:
ol { list-style-type: decimal-leading-zero; }
Emprunté et amélioré La réponse de Marcus Downing.Testé et fonctionne sous Firefox 3 et Opera 9.Prend également en charge plusieurs lignes.
ol {
counter-reset: item;
margin-left: 0;
padding-left: 0;
}
li {
display: block;
margin-left: 3.5em; /* Change with margin-left on li:before. Must be -li:before::margin-left + li:before::padding-right. (Causes indention for other lines.) */
}
li:before {
content: counter(item) ")"; /* Change 'item' to 'item, upper-roman' or 'item, lower-roman' for upper- and lower-case roman, respectively. */
counter-increment: item;
display: inline-block;
text-align: right;
width: 3em; /* Must be the maximum width of your list's numbers, including the ')', for compatability (in case you use a fixed-width font, for example). Will have to beef up if using roman. */
padding-right: 0.5em;
margin-left: -3.5em; /* See li comments. */
}
Il y a le Attribut de type ce qui vous permet de modifier le style de numérotation, cependant, vous ne pouvez pas modifier le point après le chiffre/la lettre.
<ol type="a">
<li>Turn left on Maple Street</li>
<li>Turn right on Clover Court</li>
</ol>
Les documents disent à propos de list-style-position: outside
CSS1 n'a pas précisé l'emplacement précis de la case du marqueur et pour des raisons de compatibilité, CSS2 reste tout aussi ambigu.Pour un contrôle plus précis des cases de marqueurs, veuillez utiliser des marqueurs.
Plus haut sur cette page, vous trouverez des informations sur les marqueurs.
Un exemple est :
LI:before {
display: marker;
content: "(" counter(counter) ")";
counter-increment: counter;
width: 6em;
text-align: center;
}
Non...utilisez simplement un DL :
dl { overflow:hidden; }
dt {
float:left;
clear: left;
width:4em; /* adjust the width; make sure the total of both is 100% */
text-align: right
}
dd {
float:left;
width:50%; /* adjust the width; make sure the total of both is 100% */
margin: 0 0.5em;
}
Je l'ai.Essayez ce qui suit :
<html>
<head>
<style type='text/css'>
ol { counter-reset: item; }
li { display: block; }
li:before { content: counter(item) ")"; counter-increment: item;
display: inline-block; width: 50px; }
</style>
</head>
<body>
<ol>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
</ol>
</body>
Le problème, c'est que ceci certainement ne fonctionnera pas sur les navigateurs plus anciens ou moins conformes : display: inline-block est une toute nouvelle propriété.
Rapide et sale solution alternative.Vous pouvez utiliser un caractère de tabulation avec du texte préformaté.Voici une possibilité :
<style type="text/css">
ol {
list-style-position: inside;
}
li:first-letter {
white-space: pre;
}
</style>
et ton html :
<ol>
<li> an item</li>
<li> another item</li>
...
</ol>
Notez que l'espace entre le li et le début du texte est un caractère de tabulation (ce que vous obtenez lorsque vous appuyez sur la touche de tabulation dans le bloc-notes).
Si vous devez prendre en charge des navigateurs plus anciens, vous pouvez procéder comme suit :
<style type="text/css">
ol {
list-style-position: inside;
}
</style>
<ol>
<li><pre> </pre>an item</li>
<li><pre> </pre>another item</li>
...
</ol>
Les autres réponses sont meilleures d'un point de vue conceptuel.Cependant, vous pouvez simplement remplir les chiffres avec le nombre approprié de « » pour les aligner.
* Note:Au début, je n'ai pas compris qu'on utilisait une liste numérotée.Je pensais que la liste était générée explicitement.
Je vais donner ici le genre de réponse que je n'aime généralement pas lire, mais je pense que comme il existe d'autres réponses vous indiquant comment réaliser ce que vous voulez, il pourrait être bien de repenser si ce que vous essayez de réaliser est vraiment une bonne idée.
Tout d'abord, vous devez vous demander si c'est une bonne idée d'afficher les éléments d'une manière non standard, avec un caractère de séparation différent de celui fourni.
Je n'en connais pas les raisons, mais supposons que vous ayez de bonnes raisons.
Les moyens proposés ici pour y parvenir consistent à ajouter du contenu à votre balisage, principalement via la pseudoclasse CSS :before.Ce contenu modifie réellement votre structure DOM en y ajoutant ces éléments.
Lorsque vous utilisez la numération standard « ol », vous aurez un contenu rendu dans lequel le texte « li » est sélectionnable, mais le numéro qui le précède ne peut pas être sélectionné.Autrement dit, le système de numérotation standard semble être davantage une « décoration » qu'un contenu réel.Si vous ajoutez du contenu pour des nombres en utilisant par exemple ces méthodes ":before", ce contenu sera sélectionnable, et de ce fait, cela entraînera des problèmes de vopy/coller indésirables, ou des problèmes d'accessibilité avec les lecteurs d'écran qui liront ce "nouveau" contenu en plus au système de numération standard.
Peut-être qu'une autre approche pourrait consister à styliser les nombres à l'aide d'images, bien que cette alternative entraînera ses propres problèmes (les nombres ne s'affichent pas lorsque les images sont désactivées, la taille du texte pour le nombre ne change pas, ...).
Quoi qu'il en soit, la raison de cette réponse n'est pas seulement de proposer cette alternative "images", mais de faire réfléchir les gens aux conséquences d'essayer de changer le système de numérotation standard pour les listes ordonnées.
Ce code rend le style de numérotation identique à celui des en-têtes du contenu li.
<style>
h4 {font-size: 18px}
ol.list-h4 {counter-reset: item; padding-left:27px}
ol.list-h4 > li {display: block}
ol.list-h4 > li::before {display: block; position:absolute; left:16px; top:auto; content: counter(item)"."; counter-increment: item; font-size: 18px}
ol.list-h4 > li > h4 {padding-top:3px}
</style>
<ol class="list-h4">
<li>
<h4>...</h4>
<p>...</p>
</li>
<li>...</li>
</ol>
