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

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

Problème :

Étant donné un code HTML

liste, comment pouvons-nous organiser la liste

et éléments sous forme de tableau où chaque paire apparaît sur la même ligne horizontale ? Idéalement, le

les éléments doivent occuper une colonne et le

les éléments doivent s'aligner dans un autre.

Solution utilisant la disposition en grille CSS :

La disposition en grille offre une approche puissante pour obtenir une structure de type tableau. Pour mettre en œuvre cela :

• Définissez le

  élément en tant que conteneur de grille en utilisant display:grid.

• Définissez les colonnes du modèle de grille sur max-content auto. Cela garantit que le
  (avec des étiquettes à largeur fixe) tiennent dans la première colonne, tandis que les éléments
  les éléments occupent l'espace restant dans la deuxième colonne.
• Spécifiez grid-column-start : 1 pour tous les éléments
  elements et grid-column-start : 2 pour tous les éléments
  éléments pour les positionner dans les colonnes appropriées.

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

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
}

En utilisant les propriétés de disposition de la grille CSS, nous pouvons aligner efficacement les éléments

et éléments sous forme de tableau, chaque paire étant positionnée horizontalement.

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!