Comment aligner les éléments dt et dd sur la même ligne à l'aide de la disposition en grille CSS ?

Alignement des éléments dt et dd sur la même ligne

Pour aligner le contenu des éléments dt et dd horizontalement, permettant à chaque paire de listes de définitions de résident sur la même ligne, la disposition en grille CSS offre une solution efficace.

Grille CSS Disposition

Semblable aux tableaux, la disposition en grille offre la possibilité d'organiser les éléments en colonnes et en lignes. En tirant parti de la propriété grid-template-columns, vous pouvez définir la taille des colonnes.

Exemple de code

Pour obtenir la disposition souhaitée, suivez ces étapes :

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

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
}

Dans ce code :

• l'élément dl reçoit une grille layout.
• grid-template-columns définit deux colonnes, où la première a une taille de contenu maximale pour accueillir les éléments dt, et la seconde a une largeur automatiquement dimensionnée pour les éléments dd.
• Les éléments dt sont placés dans la première colonne (grid-column-start : 1).
• Les éléments dd sont placés dans la deuxième colonne (grid-column-start : 2).

Résultat

L'application de ce code transforme le HTML fourni en un format tabulaire, avec chaque terme dt et correspondant dd définition alignée sur la même ligne.

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!