Maison > interface Web > tutoriel CSS > le corps du texte

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

DDD
Libérer: 2024-11-12 21:11:02
original
304 Les gens l'ont consulté

How to Style `dt` and `dd` Elements on the Same Horizontal Line Using CSS Grid Layout?

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;
}
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal