Bagaimana untuk Menggayakan Elemen `dt` dan `dd` pada Garis Mendatar Yang Sama Menggunakan Reka Letak Grid CSS?

Menggayakan Elemen dt dan dd pada Garis Mendatar Yang Sama

Masalah:

Diberi HTML

senarai, bagaimana kita boleh mengatur

dan

elemen dalam format jadual di mana setiap pasangan muncul pada garis mendatar yang sama? Sebaik-baiknya,

elemen harus menduduki satu lajur dan

elemen harus diselaraskan dalam yang lain.

Penyelesaian Menggunakan Reka Letak Grid CSS:

Reka letak grid menawarkan pendekatan yang berkuasa untuk mencapai struktur seperti jadual. Untuk melaksanakan ini:

• Tentukan

  elemen sebagai bekas grid menggunakan paparan: grid.

• Tetapkan lajur templat grid kepada automatik kandungan maksimum. Ini memastikan bahawa
  elemen (dengan label lebar tetap) dimuatkan ke dalam lajur pertama, manakala
  elemen menduduki ruang yang tinggal dalam lajur kedua.
• Nyatakan grid-lajur-mula: 1 untuk semua
  elemen dan grid-lajur-mula: 2 untuk semua
  elemen untuk meletakkannya dalam lajur yang betul.

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

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
}

Dengan menggunakan sifat susun atur Grid CSS, kami boleh menjajarkan

dan

elemen dalam bentuk jadual, dengan setiap pasangan diletakkan secara mendatar.

Atas ialah kandungan terperinci Bagaimana untuk Menggayakan Elemen `dt` dan `dd` pada Garis Mendatar Yang Sama Menggunakan Reka Letak Grid CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!