CSS グリッドを使用して `dt` 要素と `dd` 要素を同じ行に表示するようにスタイル設定するにはどうすればよいですか?

CSS を使用して同じ行で dt と dd をスタイリングする

CSS を使用してスタイル設定された定義リスト (

) を操作する場合、多くの場合、用語を表示することが望まれます。 (

) とそれに対応する定義 (

) を同じ行に配置し、用語を 1 つの列に配置し、定義を別の列に配置します。このレイアウトを実現するには、CSS グリッドの機能を活用できます。

CSS グリッド レイアウト

CSS グリッドを使用すると、要素を列と行内に配置できるグリッド ベースのレイアウトを定義できます。 。このアプローチにより、従来のテーブルベースのレイアウトと比較して、要素の配置をより柔軟に制御できます。

DL の例では、grid-template-columns プロパティを使用して 2 つの列を持つグリッドを定義します。

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

ここで、max-content は、最初の列 (dt 要素を含む) がその内容に合わせてサイズ変更されることを示し、auto は 2 番目の列のサイズが変更されることを意味します。 (dd 要素を含む) は残りのスペースを自動的に埋める必要があります。

dt 要素と dd 要素が同じ行に配置されるようにするには、grid-column-start:

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
}

を使用します。

この行では、すべての dt 要素が最初の列に配置され、すべての dd 要素が 2 列目に配置され、目的のインライン レイアウトが得られます。

以上がCSS グリッドを使用して `dt` 要素と `dd` 要素を同じ行に表示するようにスタイル設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。