CSS グリッド レイアウトを使用してテーブル形式でインライン dt 要素と dd 要素をスタイル設定する方法

インライン dt および dd 要素のスタイル設定

目的は、HTML 要素のスタイルを設定することです

そして

各 dt とそれに対応する dd が同じ行に表示されるように、表形式で整列します。

解決策: CSS グリッド レイアウト

CSS グリッド レイアウトは、グリッド構造内の要素を整列させるための洗練されたソリューション。希望のレイアウトを実現するには、次の手順を実行します。

1. 親

   の表示プロパティを設定します。要素を「grid」に設定して、グリッド レイアウトを有効にします。

2. grid-template-columns プロパティを使用してグリッド テンプレート列を定義します。この場合、「max-content auto」を使用して、
   が配置されるレイアウトを作成します。要素は固定幅を占めますが、
   要素は残りのスペースを占めます。
3. grid-column-start プロパティを使用して、
   の列位置を指定します。そして
   要素。たとえば、
   には Grid-column-start: 1 を設定します。要素と Grid-column-start:
   の場合は 2

結果の CSS コードは次の例のようになります。

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

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
}

これらのスタイルを適用すると、提供された HTML コードは、各

を使用して意図したとおりにレンダリングされます。およびそれに対応する

同じ行に表示され、表のような形式が作成されます。

以上がCSS グリッド レイアウトを使用してテーブル形式でインライン dt 要素と dd 要素をスタイル設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。