Wie formatiere ich Inline-dt- und dd-Elemente in einem Tabellenformat mithilfe des CSS-Rasterlayouts?

Styling von Inline-dt- und dd-Elementen

Das Ziel besteht darin, HTML-Elemente

und

sodass sie in einem Tabellenformat ausgerichtet sind, wobei jedes dt und sein entsprechendes dd in derselben Zeile angezeigt werden.

Lösung: CSS-Rasterlayout

CSS-Rasterlayout bietet eine elegante Lösung zum Ausrichten von Elementen in einer Rasterstruktur. Um das gewünschte Layout zu erreichen, führen Sie die folgenden Schritte aus:

1. Legen Sie die Anzeigeeigenschaft des übergeordneten Elements

   fest. Element zu „grid“, um das Rasterlayout zu aktivieren.

2. Definieren Sie die Rastervorlagenspalten mithilfe der Eigenschaft „grid-template-columns“. Verwenden Sie in diesem Fall „max-content auto“, um ein Layout zu erstellen, in dem
   Elemente nehmen eine feste Breite ein, während
   Elemente nehmen den verbleibenden Platz ein.
3. Verwenden Sie die Eigenschaft „grid-column-start“, um die Spaltenposition für
   anzugeben. und
   Elemente. Legen Sie beispielsweise „grid-column-start: 1“ für
   fest. Elemente und Grid-Column-Start: 2 für
   Elemente.

Der resultierende CSS-Code sollte dem folgenden Beispiel ähneln:

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

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
}

Wenn diese Stile angewendet werden, wird der bereitgestellte HTML-Code wie beabsichtigt gerendert, wobei jedes

und das entsprechende

werden in derselben Zeile angezeigt, wodurch ein tabellenartiges Format entsteht.

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