Comment puis-je styliser les éléments « dt » et « dd » pour qu'ils s'affichent sur la même ligne à l'aide de CSS Grid ?

Styliser dt et dd sur la même ligne avec CSS

Lorsque vous travaillez avec des listes de définitions (

) stylisées en utilisant CSS, il est souvent souhaité de présenter le terme (

) et sa définition correspondante (

) sur la même ligne, en alignant les termes dans une colonne et les définitions dans une autre. Pour réaliser cette mise en page, nous pouvons exploiter la puissance de CSS Grid.

CSS Grid Layout

CSS Grid nous permet de définir une mise en page basée sur une grille, où les éléments peuvent être positionnés dans des colonnes et des lignes. . Cette approche permet une plus grande flexibilité et un plus grand contrôle sur le placement des éléments par rapport aux dispositions traditionnelles basées sur des tableaux.

Pour notre exemple dl, nous définirons une grille avec deux colonnes à l'aide de la propriété grid-template-columns : une pour les termes dt et un autre pour les définitions dd.

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

Ici, max-content indique que la première colonne (contenant les éléments dt) doit être dimensionnée pour s'adapter à son contenu, tandis que auto signifie que la deuxième colonne (contenant les éléments dd) devrait automatiquement remplir l'espace restant.

Pour garantir que les éléments dt et dd sont positionnés sur la même ligne, nous utiliserons grid-column-start :

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
}

Cette ligne place tous les éléments dt dans la première colonne et tous les éléments dd dans la deuxième colonne, ce qui donne la disposition en ligne souhaitée.

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!