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 要素にグリッドが与えられます。 layout.
• grid-template-columns は 2 つの列を定義します。最初の列には dt 要素を収容できる最大コンテンツ サイズがあり、2 番目の列には dd 要素の自動サイズ調整された幅があります。
• dt 要素は最初の列 (grid-column-start: 1) に配置されます。
• dd 要素は 2 番目の列に配置されます(grid-column-start: 2).

Result

このコードを適用すると、提供された HTML が、各 dt 用語と対応する表形式に変換されます。 dd 定義は同じ行に配置されます。

以上がCSS グリッド レイアウトを使用して dt 要素と dd 要素を同じ行に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。