Comment styliser les éléments « dt » et « dd » sur la même ligne horizontale à l'aide de la disposition en grille CSS ?
Libérer: 2024-11-12 21:11:02
original
264 Les gens l'ont consulté
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!
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
Derniers articles par auteur
-
2024-11-15 05:44:03
-
2024-11-15 05:43:02
-
2024-11-15 05:42:02
-
2024-11-15 05:41:02
-
2024-11-15 05:40:02
-
2024-11-15 05:39:02
-
2024-11-15 05:38:02
-
2024-11-15 05:37:02
-
2024-11-15 05:36:02
-
2024-11-15 05:35:02