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:
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!