CSS グリッド レイアウトを使用して、同じ水平線上にある `dt` 要素と `dd` 要素のスタイルを設定する方法

dt 要素と dd 要素を同じ水平線上にスタイル設定する

問題:

HTML が与えられた場合

リスト、

をどのように配置できますか?そして

各ペアが同じ水平線上に表示される表形式の要素?理想的には、

要素は 1 列を占める必要があり、対応する

CSS グリッド レイアウトを使用した解決策:

グリッド レイアウトは、テーブルのような構造を実現するための強力なアプローチを提供します。これを実装するには:

• を定義します。 display:grid.

• グリッド テンプレートの列を max-content auto に設定します。これにより、
  が確実に実行されます。要素 (固定幅ラベル付き) は最初の列に収まりますが、
  要素は最初の列に収まります。要素は 2 番目の列の残りのスペースを占めます。
• grid-column-start を指定します: すべてに 1
  要素と Grid-column-start: すべての
  に対して 2

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

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
}

CSS グリッド レイアウト プロパティを利用することで、

要素を効果的に配置できます。そして

要素を表形式で配置し、各ペアを水平方向に配置します。

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