Bagaimana untuk Menggayakan Elemen Inline dt dan dd dalam Format Jadual Menggunakan Reka Letak Grid CSS?

Menggayakan Elemen Sebaris dt dan dd

Matlamatnya adalah untuk menggayakan elemen HTML

dan

supaya ia diselaraskan dalam format jadual, dengan setiap dt dan dd yang sepadan dipaparkan pada baris yang sama.

Penyelesaian: Reka Letak Grid CSS

Reka letak Grid CSS menyediakan penyelesaian yang elegan untuk menjajarkan elemen dalam struktur grid. Untuk mencapai reka letak yang diingini, gunakan langkah berikut:

1. Tetapkan sifat paparan induk

   elemen ke "grid" untuk mendayakan reka letak grid.

2. Tentukan lajur templat grid menggunakan sifat grid-template-columns. Dalam kes ini, gunakan "auto kandungan maksimum" untuk membuat reka letak di mana
   elemen menduduki lebar tetap manakala
   elemen mengambil ruang yang tinggal.
3. Gunakan sifat grid-column-start untuk menentukan kedudukan lajur untuk
   dan
   elemen. Contohnya, tetapkan grid-column-start: 1 untuk
   elemen dan grid-lajur-mula: 2 untuk
   elemen.

Kod CSS yang terhasil hendaklah menyerupai contoh di bawah:

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

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
}

Dengan gaya ini digunakan, kod HTML yang disediakan akan dipaparkan seperti yang dimaksudkan, dengan setiap

dan

dipaparkan pada baris yang sama, mencipta format seperti jadual.

Atas ialah kandungan terperinci Bagaimana untuk Menggayakan Elemen Inline dt dan dd dalam Format Jadual Menggunakan Reka Letak Grid CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!