Wie kann ich „dt'- und „dd'-Elemente mit CSS Grid so gestalten, dass sie in derselben Zeile angezeigt werden?

dt und dd mit CSS auf derselben Linie formatieren

Beim Arbeiten mit Definitionslisten (

), die mit CSS formatiert wurden, ist es oft erwünscht, den Begriff darzustellen (

) und die entsprechende Definition (

) in derselben Zeile, wobei die Begriffe in einer Spalte und die Definitionen in einer anderen ausgerichtet werden. Um dieses Layout zu erreichen, können wir die Leistungsfähigkeit von CSS Grid nutzen.

CSS Grid Layout

CSS Grid ermöglicht es uns, ein rasterbasiertes Layout zu definieren, bei dem Elemente innerhalb von Spalten und Zeilen positioniert werden können . Dieser Ansatz ermöglicht eine größere Flexibilität und Kontrolle über die Elementplatzierung im Vergleich zu herkömmlichen tabellenbasierten Layouts.

Für unser dl-Beispiel definieren wir ein Raster mit zwei Spalten mithilfe der Eigenschaft „grid-template-columns“: eine für die dt-Begriffe und eine weitere für die dd-Definitionen.

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

Hier gibt max-content an, dass die Größe der ersten Spalte (die die dt-Elemente enthält) so angepasst werden sollte, dass sie zu ihrem Inhalt passt, während auto bedeutet, dass die zweite Spalte (enthält die dd-Elemente) sollte automatisch den verbleibenden Platz füllen.

Um sicherzustellen, dass die dt- und dd-Elemente in derselben Zeile positioniert sind, verwenden wir „grid-column-start:“:

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
}

Diese Zeile platziert alle dt-Elemente in der ersten Spalte und alle dd-Elemente in der zweiten Spalte, was zum gewünschten Inline-Layout führt.

Das obige ist der detaillierte Inhalt vonWie kann ich „dt'- und „dd'-Elemente mit CSS Grid so gestalten, dass sie in derselben Zeile angezeigt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!