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

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;
}

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!