Wie kann ich „dt'- und „dd'-Elemente in einer Definitionsliste mithilfe des Inline-Rasterlayouts horizontal ausrichten?

Implementieren eines Inline-Grid-Layouts für dt- und dd-Elemente

In einer Definitionsliste (

) werden die Begriffe (< dt>) werden über den Definitionen angezeigt (

). Um diese Elemente inline auszurichten, können wir das CSS-Rasterlayout verwenden.

Das Rasterlayout bietet einen vielseitigen Ansatz zum Definieren des Layouts von Elementen auf einer Webseite. Es ermöglicht uns, Inhalte in Spalten und Zeilen zu verteilen und die Größe jedes Rasterbereichs festzulegen.

Um ein Inline-Raster für die dt- und dd-Elemente zu erstellen, verwenden wir das folgende CSS:

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

• Anzeige: Raster; setzt das dl-Element auf einen Rastercontainer.
• grid-template-columns: max-content auto; definiert zwei Spalten für das Raster. Die erste Spalte passt ihre Breite automatisch basierend auf ihrem Inhalt an, während die zweite Spalte den verbleibenden Platz ausfüllt.
• grid-column-start: 1; platziert das dt-Element in der ersten Spalte des Rasters.
• grid-column-start: 2; Platziert das dd-Element in der zweiten Spalte des Rasters.

Durch die Implementierung dieses Rasterlayouts werden die dt- und dd-Elemente horizontal angezeigt, wobei jedes Paar eine einzelne Zeile einnimmt. Dadurch werden die Begriffe und Definitionen wie gewünscht ausgerichtet.

Das obige ist der detaillierte Inhalt vonWie kann ich „dt'- und „dd'-Elemente in einer Definitionsliste mithilfe des Inline-Rasterlayouts horizontal ausrichten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!