如何使用 CSS 網格設定'dt”和'dd”元素的樣式以顯示在同一行？

使用CSS 在同一行上設定dt 和dd 樣式

使用CSS 樣式化的定義清單(

) 時，通常需要呈現該術語() 及其對應的定義(

) 在同一行，將術語對齊一列，並將另一個中的定義。為了實現這種佈局，我們可以利用 CSS 網格的強大功能。

CSS 網格佈局

CSS 網格允許我們定義基於網格的佈局，其中元素可以放置在列和行中。與傳統的基於表格的佈局相比，這種方法可以提供更大的靈活性和對元素放置的控制。

對於我們的 dl 範例，我們將使用 grid-template-columns 屬性定義一個具有兩列的網格：一列用於dt 術語和 dd 定義的另一個。

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

這裡，max-content 指示第一列（包含 dt 元素）的大小應適合其內容，而 auto 表示第二列（包含 dd 元素）應自動填入剩餘空間。

為了確保dt 和dd 元素位於同一行，我們將使用grid- column-start:

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
}

此行將所有dt 元素放置在第一列中，並將所有dd元素放置在第二列中，從而產生所需的內聯佈局。

以上是如何使用 CSS 網格設定'dt”和'dd”元素的樣式以顯示在同一行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！