C'est la solution que j'ai avec Firefox 3, Opera et Google Chrome. La liste s'affiche toujours dans IE7 (mais sans le crochet fermé et les numéros d'alignement à 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>
EDIT: Correction de plusieurs lignes incluse par strager
Il existe é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.
Reportez - vous à la propriété CSS de type liste . 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;
/* ... */
ol {counter-reset: item; padding-left: 0;} li {display: block; margin-bottom: .5em;} li:before {display: inline-block; content: counter(item) ") "; counter-increment: item; padding-right: 0.8em;}.Le CSS pour styliser les listes est ici , mais est essentiellement:
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 ça (notez que je ne l'ai pas vraiment essayé):
la source
Vous pouvez également spécifier vos propres numéros dans le HTML - par exemple, si les numéros sont fournis par une base de données:
L'
seqattribut est rendu visible à l'aide d'une méthode similaire à celle donnée dans d'autres réponses. Mais au lieu d'utilisercontent: counter(foo), nous utilisonscontent: attr(seq).Démo dans CodePen avec plus de style
la source
valueattribut sur<li>. par exemple<li value="20">. Ensuite, vous n'avez besoin d'aucun pseudo-élément. Démovalue="4A", car cela ne fonctionnera pas. En outre, l'attribut value peut fonctionner avec l'typeattribut, mais la valeur doit toujours être un nombre (car il fonctionne dans un ensemble ordonné).reversedattribut est html5 uniquement, comme c'est le casvaluepour leli). Au lieu d'utiliser votreseqj'ai défini unvalueet utilisé à laattr(value)place deattr(seq)J'ai volé beaucoup de cela à d'autres réponses, mais cela fonctionne dans FF3 pour moi. Il a
upper-roman, indentation uniforme, une parenthèse étroite.la source
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 (énormément grande) du marché qui utilise encore d'anciens navigateurs,
Quelque chose comme ce qui suit, qui force un fixe avec sur les éléments. Oui, je sais que c'est moins élégant d'avoir à choisir la largeur vous-même, mais utiliser CSS pour votre mise en page, c'est comme un travail de police d'infiltration: aussi bons que soient vos motifs, cela devient toujours compliqué.
Mais vous allez devoir expérimenter pour trouver la solution exacte.
la source
Les nombres s'alignent mieux si vous ajoutez des zéros non significatifs aux nombres, en définissant le type de style de liste sur:
la source
HTML5: utilisez l'
valueattribut (aucun CSS nécessaire)Les navigateurs modernes interpréteront l'
valueattribut et l'afficheront comme vous le souhaitez. Consultez la documentation MDN .Jetez également un œil à l'
<ol>article sur MDN , en particulier à la documentation de l'startattribut and.la source
J'ai emprunté et amélioré la réponse de Marcus Downing . Testé et fonctionne dans Firefox 3 et Opera 9. Prend également en charge plusieurs lignes.
la source
Il existe l' attribut Type qui vous permet de changer le style de numérotation, cependant, vous ne pouvez pas changer le point après le chiffre / la lettre.
la source
Les documents disent concernant
list-style-position: outsidePlus haut sur cette page, vous trouverez les informations sur les marqueurs.
Un exemple est:
la source
Non ... utilisez simplement un DL:
la source
Je l'ai. Essayez ce qui suit:
Le hic, c'est que cela ne fonctionnera certainement pas sur les navigateurs plus anciens ou moins conformes:
display: inline-blockc'est une toute nouvelle propriété.la source
Solution alternative rapide et salissante . Vous pouvez utiliser un caractère de tabulation avec du texte préformaté. Voici une possibilité:
et votre html:
Notez que l'espace entre la
libalise 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 le faire à la place:
la source
Les autres réponses sont meilleures d'un point de vue conceptuel. Cependant, vous pouvez simplement remplir à gauche les nombres avec le nombre approprié de «& ensp;» pour les faire aligner.
* Remarque: au début, je n'ai pas reconnu qu'une liste numérotée était utilisée. Je pensais que la liste était explicitement générée.
la source
Je vais donner ici le genre de réponse que je n'aime généralement pas lire, mais je pense que comme il y a d'autres réponses vous indiquant comment réaliser ce que vous voulez, il pourrait être bien de repenser si ce que vous essayez d'atteindre 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 aboutir qui consistent à ajouter du contenu à votre balisage, principalement via le CSS: avant la pseudoclasse. Ce contenu modifie vraiment la structure de votre DOM, en y ajoutant ces éléments.
Lorsque vous utilisez la numération "ol" standard, 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 plus une "décoration" qu'un contenu réel. Si vous ajoutez du contenu pour des nombres en utilisant par exemple les méthodes ": avant", ce contenu pourra être sélectionné et dû à cela, en effectuant des problèmes de vopy / paste indésirables ou des problèmes d'accessibilité avec des lecteurs d'écran qui liront ce "nouveau" contenu en plus au système de numération standard.
Une autre approche pourrait peut-être être de styliser les nombres à l'aide d'images, bien que cette alternative apportera ses propres problèmes (nombres non affichés lorsque les images sont désactivées, 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 de tenter de changer le système de numération standard des listes ordonnées.
la source
Ce code rend le style de numérotation identique aux en-têtes du contenu li.
la source