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

Comment puis-je aligner les numéros 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 

Y a-t-il également une solution CSS pour passer des nombres aux listes alphabétiques / romaines au lieu d’utiliser l’atsortingbut type sur l’élément ol.

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

C’est la solution que je travaille dans Firefox 3, Opera et Google Chrome. La liste s’affiche toujours dans IE7 (mais sans les parenthèses fermantes 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; } 
 
  1. One
  2. Two
  3. Three
  4. Four
  5. Five
  6. Six
  7. Seven
  8. Eight
  9. Nine
    Items
  10. Ten
    Items

Le CSS pour les listes de styles est ici , mais est fondamentalement:

 li { list-style-type: decimal; list-style-position: inside; } 

Cependant, la mise en page spécifique que vous recherchez ne peut probablement être réalisée qu’en plongeant dans les entrailles de la mise en page avec quelque chose comme ceci (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 } 

J’ai volé beaucoup de ceci dans d’autres réponses, mais cela fonctionne pour moi dans FF3. Il a upper-roman , indenting uniforme, un support étroit.

 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    new document     
  1. One
  2. Two
  3. Three
  4. Four
  5. Five
  6. Six
  7. Seven
  8. Eight
  9. Nine
  10. Ten

Vous pouvez également spécifier vos propres numéros dans le code HTML – par exemple si les numéros sont fournis par une firebase database:

 
  1. Item one
  2. Item twenty
  3. Item three hundred

L’atsortingbut seq 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) ". "; } 

Démo dans CodePen avec plus de style

Je suggère de jouer avec l’atsortingbut: before et de voir ce que vous pouvez faire avec. Cela signifie que votre code est vraiment limité à de nouveaux navigateurs, et exclut la section (trop grande) du marché utilisant encore de vieux navigateurs,

Quelque chose comme ce qui suit, qui force un fixe avec les objects. Oui, je sais que c’est moins élégant de devoir choisir la largeur, mais l’utilisation de CSS pour votre mise en page est comme un travail policier sous couverture: quelle que soit votre motivation, elle devient toujours désordonnée.

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

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

Les numéros s’alignent mieux si vous ajoutez des zéros à gauche aux numéros, en définissant list-style-type sur:

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

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

Il y a l’ atsortingbut Type qui vous permet de changer le style de numérotation, cependant, vous ne pouvez pas modifier l’arrêt complet après le numéro / lettre.

 
  1. Turn left on Maple Street
  2. Turn right on Clover Court

Les docs disent à propos de la position de la list-style-position : outside

CSS1 n’a pas spécifié l’emplacement précis du marqueur et pour des raisons de compatibilité, CSS2 rest également ambigu. Pour un contrôle plus précis des boîtes de marqueurs, veuillez utiliser des marqueurs.

En haut de cette page, il y a des trucs sur les marqueurs.

Un exemple est:

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

Non … utilisez juste 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:

      
  1. Something
  2. Something
  3. Something
  4. Something
  5. Something
  6. Something
  7. Something
  8. Something
  9. Something
  10. Something
  11. Something
  12. Something

Le problème est que cela ne fonctionnera certainement pas sur les navigateurs plus anciens ou moins compatibles: display: inline-block est une propriété très nouvelle.

Solution alternative rapide et salissante . Vous pouvez utiliser un caractère de tabulation avec du texte préformaté. Voici une possibilité:

  

et votre HTML:

 
  1. an item
  2. another item
  3. ...

Notez que l’espace entre la balise 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 avez besoin de prendre en charge des navigateurs plus anciens, vous pouvez le faire à la place:

  
  1.  

    an item

  2.  

    another item

  3. ...

Les autres réponses sont meilleures d’un sharepoint vue conceptuel. Cependant, vous pouvez simplement appuyer sur les chiffres avec le nombre approprié de «& ensp; pour les aligner.

* Remarque: je n’ai pas tout d’abord reconnu qu’une liste numérotée était utilisée. Je pensais que la liste était explicitement générée.

Je vais donner ici le genre de réponse que je n’aime pas lire, mais je pense que comme il y a d’autres réponses qui vous expliquent comment réaliser ce que vous voulez, il serait bon de repenser si ce que vous essayez de faire est vraiment une bonne idée.

Tout d’abord, vous devriez penser que c’est une bonne idée de montrer les éléments de manière non standard, avec un séparateur différent de celui fourni.

Je ne connais pas les raisons de cela, mais supposons que vous avez de bonnes raisons.

Les moyens mis en œuvre pour y parvenir consistent à append du contenu à votre balisage, principalement via le CSS: avant la pseudo-classe. Ce contenu modifie réellement la structure de votre 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” peut être sélectionné, mais le nombre qui le précède ne peut pas être sélectionné. Autrement dit, le système de numérotation standard semble être plus «décoratif» que le contenu réel. Si vous ajoutez du contenu pour des nombres en utilisant, par exemple, les méthodes “: before”, ce contenu sera sélectionnable et exécutable, effectuant des problèmes vopy / paste indésirables ou des problèmes d’accessibilité avec les lecteurs d’écran qui liront ce “nouveau” contenu. au système de numération standard.

Peut-être une autre approche pourrait être de styliser les nombres en utilisant des images, bien que cette alternative apportera ses propres problèmes (les nombres ne sont pas affichés lorsque les images sont désactivées, la taille du texte 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 conséquences des tentatives de modification du système de numération standard des listes ordonnées.

Ce code rend le style de numérotation identique à celui des en-têtes de contenu li.

  
  1. ...

    ...

  2. ...