Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
Liste de groupes avec indicateurs
Dans cette recette, vous allez créer un motif de liste de groupes avec des indicateurs affichant un nombre.
Exigences
Les éléments de la liste doivent être affichés avec les indicateurs. L'indicateur doit être aligné à droite et centré verticalement. L'indicateur doit rester centré verticalement qu'il y ait une seule ligne de contenu ou plusieurs lignes de texte.
Recette
Cliquez sur « Exécuter » dans les blocs de code ci-dessous pour modifier l'exemple dans le MDN Playground :
<ul> <li> Élément un <span>2</span> </li> <li> Élément deux <span>10</span> </li> <li> Élément trois <span>9</span> </li> <li> Élément quatre <span>0</span> </li></ul>body { font: 1.2em / 1.5 sans-serif; padding: 0; margin: 1em;}.list-group { list-style: none; margin: 0; padding: 0; border: 1px solid #cccccc; border-radius: 0.5em; width: 20em;}.list-group li { border-top: 1px solid #cccccc; padding: 0.5em; display: flex; justify-content: space-between; align-items: center;}.list-group li:first-child { border-top: 0;}.list-group .badge { background-color: rebeccapurple; color: white; font-weight: bold; font-size: 80%; border-radius: 10em; min-width: 1.5em; padding: 0.25em; text-align: center;}Choix effectués
Flexbox rend ce motif particulièrement simple et facilite également les modifications de la présentation.
Pour que le texte et l'indicateur soient correctement alignés, j'utilise la propriétéjustify-content avec la valeurspace-between. Cela place l'espace supplémentaire entre les éléments. Dans l'exemple interactif, si vous retirez cette propriété, vous verrez l'indicateur se déplacer à la fin du texte pour les éléments dont le texte est plus court qu'une ligne.
Pour aligner le contenu horizontalement, j'utilise la propriétéalign-items pour aligner le texte et l'indicateur sur l'axe transversal. Si vous souhaitez que l'indicateur soit aligné en haut du contenu, remplacez cette valeur paralign-items: flex-start.