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 ?

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

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!