如何使用 CSS 網格佈局將 dt 和 dd 元素對齊在同一行？

在同一行上對齊dt 和dd 元素

水平對齊dt 和dd 元素的內容，允許每個定義列表對CSS 網格佈局提供了一個有效的解決方案。

CSS 網格佈局

與表格類似，網格佈局提供了將元素組織成列和列的能力。行。透過利用 grid-template-columns 屬性，您可以定義列的大小。

範例程式碼

要實現所需的佈局，請按照以下步驟操作：

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

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
}

在此程式碼中：

• dl 元素被賦予網格佈局。
• grid-template-columns 定義兩列，其中第一列具有最大值內容大小以容納 dt 元素，第二個具有用於 dd 元素的自動調整寬度。
• dt 元素放置在第一列 (grid-column-start: 1)。
• dd 元素放置在第二列 (grid-column-start: 2)。

結果

套用此程式碼會將提供的 HTML 轉換為表格格式，每個 dt 術語和對應的 dd 定義在同一行對齊。

以上是如何使用 CSS 網格佈局將 dt 和 dd 元素對齊在同一行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！