Wie formatiere ich „dt'- und „dd'-Elemente mithilfe des CSS-Rasterlayouts auf derselben horizontalen Linie?

Dt- und dd-Elemente auf derselben horizontalen Linie formatieren

Problem:

Gegeben ein HTML

Liste, wie können wir die

und

Elemente in einem Tabellenformat, bei dem jedes Paar auf derselben horizontalen Linie erscheint? Idealerweise ist das

Elemente sollten eine Spalte belegen und die entsprechenden

Elemente sollten aneinander ausgerichtet sein.

Lösung mit CSS-Rasterlayout:

Rasterlayout bietet einen leistungsstarken Ansatz zum Erreichen einer tabellenähnlichen Struktur. Um dies zu implementieren:

• Definieren Sie die

  Element als Rastercontainer mit display: grid.

• Setzen Sie die Spalten der Rastervorlage auf „Max. Inhalt automatisch“. Dadurch wird sichergestellt, dass der
  Elemente (mit Beschriftungen fester Breite) passen in die erste Spalte, während die
  Elemente belegen den verbleibenden Platz in der zweiten Spalte.
• Grid-Column-Start angeben: 1 für alle
  Elemente und Grid-Column-Start: 2 für alle
  Elemente, um sie in den richtigen Spalten zu positionieren.

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

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
}

Durch die Verwendung der CSS-Rasterlayouteigenschaften können wir die

-Elemente effektiv ausrichten. und

Elemente in tabellarischer Form, wobei jedes Paar horizontal positioniert ist.

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