109

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

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.

Je suis surtout intéressé par les réponses qui fonctionnent sur Firefox 3.

— grom
source

98

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>

Développer l'extrait

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;
/* ... */

— grom
source

Nécessaire pour rajouter les nombres, un style global les supprimait (qui sait pourquoi vous utiliseriez un ol et supprimeriez les nombres plutôt qu'un ul ??). Réponse très claire +1 pour une explication complète et le code, peut facilement être modifiée pour faire n'importe quoi.

— Morvael

Je suggère un CSS plus propre marge / padding solution, qui fonctionne mieux avec des listes ayant grande numérotation:

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;}

.

— mmj

28

Le CSS pour styliser les listes est ici , mais est essentiellement:

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 ça (notez que je ne l'ai pas vraiment essayé):

ol { counter-reset: item }
li { display: block }
li:before { content: counter(item) ") "; counter-increment: item }

— Marcus Downing
source

1

Cela permet d'aligner les chiffres, mais le contenu du texte ne l'est pas.

— grom

13

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:

ol {
  list-style: none;
}

ol>li:before {
  content: attr(seq) ". ";
}

<ol>
  <li seq="1">Item one</li>
  <li seq="20">Item twenty</li>
  <li seq="300">Item three hundred</li>
</ol>

Développer l'extrait

L' seqattribut 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).

Démo dans CodePen avec plus de style

— z0r
source

7

Vous pouvez simplifier cela si vous utilisez simplement l' valueattribut sur <li>. par exemple <li value="20">. Ensuite, vous n'avez besoin d'aucun pseudo-élément. Démo

— GWB

1

@GWB Bien que ce soit valide (et une bonne solution), il est limité aux valeurs numériques car la liste est ordinale. En tant que tel, vous ne pouvez pas faire quelque chose comme cela value="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é).

— jedd.ahyoung

Merci - cela a fonctionné pour moi quand j'ai eu besoin de Flying Saucer pour afficher une liste dans l'ordre inverse (l' reversedattribut est html5 uniquement, comme c'est le cas valuepour le li). Au lieu d'utiliser votre seqj'ai défini un valueet utilisé à la attr(value)place deattr(seq)

— jaygooby

8

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.

<!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>

— Steve Perks
source

5

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é.

li:before {
  content: counter(item) ") ";
  counter-increment: item;
  display: marker;
  width: 2em;
}

Mais vous allez devoir expérimenter pour trouver la solution exacte.

— Marcus Downing
source

vous aurez besoin d'un compteur-réinitialisé: item; avant ce bloc.

— Greg

5

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:

ol { list-style-type: decimal-leading-zero; }

— Peter Hilton
source

5

HTML5: utilisez l' `value`attribut (aucun CSS nécessaire)

Les navigateurs modernes interpréteront l' valueattribut et l'afficheront comme vous le souhaitez. Consultez la documentation MDN .

<ol>
  <li value="3">This is item three.</li>
  <li value="50">This is item fifty.</li>
  <li value="100">This is item one hundred.</li>
</ol>

Développer l'extrait

Jetez également un œil à l' <ol>article sur MDN , en particulier à la documentation de l' startattribut and.

— Flimm
source

4

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.

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. */
}

— strager
source

Vous voulez également aligner le texte: à gauche; Pas vrai. Et la dernière ligne doit être margin-left: -3.5em;

— grom le

@grom, merci pour la correction em. De plus, Opera rend les listes alignées à droite par défaut, j'ai donc imité ce comportement.

— strager

@grom, Le problème de Firefox est ... Firefox place le pseudo-élément li: before sur sa propre ligne sans le float, même s'il s'agit de display: inline-block.

— strager

@strager, Eh bien, j'utilise 3.0.4 sous Linux et 3.0.3 sous Windows, et cela fonctionne pour moi sans le flotteur: gauche; règle.

— grom

@grom, Hmm, intéressant. Je viens de me tester et cela fonctionne sans le flotteur. Peut-être que je me suis trompé.

— strager

2

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.

<ol type="a">
    <li>Turn left on Maple Street</li>
    <li>Turn right on Clover Court</li>
</ol>

— GateKiller
source

Le balisage dans cette réponse doit être corrigé. Utilisez des minuscules et placez les valeurs d'attribut entre "guillemets".

— dylanfm

Et fermez vos éléments: <li> ... </li>.

— dylanfm

@dylanfm - Vous savez que le balisage présenté est correct, 100% HTML valide, oui? Ne rejetez pas les gens pour ne pas utiliser XHTML à moins que XHTML ne soit demandé.

— Ben Blank

Je ne vous ai pas contre-voté. Et oui, c'est vrai re. HTML. J'étais juste une personne pointilleuse standard.

— dylanfm

Mes excuses pour avoir publié du code HTML invalide. J'ai copié le code d'un site Web et je n'ai pas pensé à le corriger. J'ai honte maintenant :(

— GateKiller

1

Les documents disent concernant list-style-position: outside

CSS1 n'a pas précisé l'emplacement précis de la boîte de marqueurs et pour des raisons de compatibilité, CSS2 reste également ambigu. Pour un contrôle plus précis des boîtes de marqueurs, veuillez utiliser des marqueurs.

Plus haut sur cette page, vous trouverez les informations sur les marqueurs.

Un exemple est:

       LI:before { 
           display: marker;
           content: "(" counter(counter) ")";
           counter-increment: counter;
           width: 6em;
           text-align: center;
       }

— Stephen Denne
source

Tous les exemples (voir w3.org/TR/CSS2/generate.html#q11 ) pour les marqueurs ne fonctionnent pas pour moi.

— grom

1

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;
}

— William Entriken
source

0

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 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é.

— Marcus Downing
source

0

Solution alternative rapide et salissante . 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 votre html:

<ol>
<li>    an item</li>
<li>    another item</li>
...
</ol>

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:

<style type="text/css">
ol {
    list-style-position: inside;
}
</style>

<ol>
    <li><pre>   </pre>an item</li>
    <li><pre>   </pre>another item</li>
    ...
</ol>

— Marco Luglio
source

0

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.

— Métro
source

0

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.

— tomasofène
source

0

Ce code rend le style de numérotation identique aux 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>

— Vlad Alivanov
source

Comment pouvez-vous personnaliser les numéros dans une liste ordonnée?

HTML5: utilisez l' valueattribut (aucun CSS nécessaire)

HTML5: utilisez l' `value`attribut (aucun CSS nécessaire)