Heim > Web-Frontend > CSS-Tutorial > Wie richte ich dt- und dd-Elemente mithilfe des CSS-Rasterlayouts auf derselben Linie aus?

Wie richte ich dt- und dd-Elemente mithilfe des CSS-Rasterlayouts auf derselben Linie aus?

Susan Sarandon
Freigeben: 2024-11-11 00:32:02
Original
217 Leute haben es durchsucht

How to Align dt and dd Elements on the Same Line Using CSS Grid Layout?

Ausrichten von dt- und dd-Elementen auf derselben Linie

Um den Inhalt von dt- und dd-Elementen horizontal auszurichten, sodass jedes Definitionslistenpaar dies tun kann Bleiben Sie in der gleichen Zeile, bietet das CSS-Rasterlayout eine effektive Lösung.

CSS Grid Layout

Ähnlich wie Tabellen bietet das Rasterlayout die Möglichkeit, Elemente in Spalten und Zeilen zu organisieren. Durch Nutzung der Eigenschaft „grid-template-columns“ können Sie die Größe der Spalten definieren.

Beispielcode

Um das gewünschte Layout zu erreichen, befolgen Sie diese Schritte:

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

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
}
Nach dem Login kopieren

In diesem Code:

  • dl-Element erhält ein Raster Layout.
  • grid-template-columns definiert zwei Spalten, wobei die erste eine maximale Inhaltsgröße hat, um die dt-Elemente aufzunehmen, und die zweite eine automatisch angepasste Breite für die dd-Elemente hat.
  • dt-Elemente werden in der ersten Spalte platziert (grid-column-start: 1).
  • dd-Elemente werden in der zweiten Spalte platziert (grid-column-start: 2).

Ergebnis

Durch die Anwendung dieses Codes wird der bereitgestellte HTML-Code in ein Tabellenformat umgewandelt, mit jedem dt-Begriff und entsprechend dd-Definition auf derselben Zeile ausgerichtet.

Das obige ist der detaillierte Inhalt vonWie richte ich dt- und dd-Elemente mithilfe des CSS-Rasterlayouts auf derselben Linie aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage