Maison > interface Web > tutoriel CSS > Comment puis-je aligner horizontalement les éléments « dt » et « dd » dans une liste de définitions à l'aide d'une disposition de grille en ligne ?

Comment puis-je aligner horizontalement les éléments « dt » et « dd » dans une liste de définitions à l'aide d'une disposition de grille en ligne ?

Mary-Kate Olsen
Libérer: 2024-11-12 00:25:03
original
232 Les gens l'ont consulté

How can I align `dt` and `dd` elements in a definition list horizontally using inline grid layout?

Implémentation d'une disposition de grille en ligne pour les éléments dt et dd

Dans une liste de définitions (

), les termes (< dt>) sont affichés au-dessus des définitions (
). Pour aligner ces éléments en ligne, nous pouvons utiliser la disposition en grille CSS.

La disposition en grille offre une approche polyvalente pour définir la disposition des éléments sur une page Web. Il nous permet de répartir le contenu en colonnes et en lignes et de spécifier la taille de chaque zone de grille.

Pour créer une grille en ligne pour les éléments dt et dd, nous utilisons le CSS suivant :

dl {
  display: grid;
  grid-template-columns: max-content auto;
}

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
}
Copier après la connexion

Dans ce cas :

  • affichage : grille ; définit l'élément dl sur un conteneur de grille.
  • grid-template-columns : max-content auto ; définit deux colonnes pour la grille. La première colonne ajustera automatiquement sa largeur en fonction de son contenu, tandis que la deuxième colonne remplira l'espace restant.
  • grid-column-start : 1 ; place l'élément dt dans la première colonne de la grille.
  • grid-column-start : 2 ; place l'élément dd dans la deuxième colonne de la grille.

En implémentant cette disposition de grille, les éléments dt et dd seront affichés horizontalement, chaque paire occupant une seule ligne. Cela aligne les termes et les définitions comme souhaité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal