Comment styliser les éléments dt et dd en ligne dans un format de tableau à l'aide de la disposition en grille CSS ?

Style des éléments dt et dd en ligne

L'objectif est de styliser les éléments HTML

et afin qu'ils s'alignent dans un format de tableau, chaque dt et son dd correspondant étant affichés sur la même ligne.

Solution : disposition en grille CSS

La disposition en grille CSS fournit un solution élégante pour aligner des éléments dans une structure en grille. Pour obtenir la mise en page souhaitée, procédez comme suit :

1. Définissez la propriété d'affichage du parent

   élément sur "grid" pour activer la disposition de la grille.

2. Définissez les colonnes du modèle de grille à l'aide de la propriété grid-template-columns. Dans ce cas, utilisez "max-content auto" pour créer une mise en page où
   les éléments occupent une largeur fixe tandis que
   les éléments occupent l'espace restant.
3. Utilisez la propriété grid-column-start pour spécifier la position de la colonne pour
   et éléments. Par exemple, définissez grid-column-start : 1 pour
   éléments et début de colonne de grille : 2 pour
   éléments.

Le code CSS résultant doit ressembler à l'exemple ci-dessous :

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

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
}

Une fois ces styles appliqués, le code HTML fourni s'affichera comme prévu, avec chaque élément

et son

affiché sur la même ligne, créant un format semblable à un tableau.

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!