Bagaimanakah saya boleh menggayakan elemen `dt` dan `dd` untuk dipaparkan pada baris yang sama menggunakan Grid CSS?

Menggayakan dt dan dd pada Baris yang Sama dengan CSS

Apabila bekerja dengan senarai definisi (

) yang digayakan menggunakan CSS, ia selalunya dikehendaki untuk membentangkan istilah (

) dan takrifan sepadannya (

) pada baris yang sama, menjajarkan istilah dalam satu lajur dan takrifan dalam lajur yang lain. Untuk mencapai reka letak ini, kami boleh memanfaatkan kuasa Grid CSS.

Reka Letak Grid CSS

Grid CSS membolehkan kami menentukan reka letak berasaskan grid, di mana elemen boleh diletakkan dalam lajur dan baris . Pendekatan ini membolehkan lebih fleksibiliti dan kawalan ke atas peletakan elemen berbanding dengan reka letak berasaskan jadual tradisional.

Untuk contoh dl kami, kami akan mentakrifkan grid dengan dua lajur menggunakan sifat grid-template-columns: satu untuk istilah dt dan satu lagi untuk takrifan dd.

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

Di sini, kandungan maks menunjukkan bahawa lajur pertama (mengandungi unsur dt) hendaklah bersaiz agar sesuai dengan kandungannya, manakala auto bermaksud lajur kedua (mengandungi elemen dd) harus mengisi ruang yang tinggal secara automatik.

Untuk memastikan elemen dt dan dd diletakkan pada baris yang sama, kami akan menggunakan grid-column-start:

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
}

Baris ini meletakkan semua elemen dt dalam lajur pertama dan semua elemen dd dalam lajur kedua, menghasilkan yang diingini reka letak sebaris.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menggayakan elemen `dt` dan `dd` untuk dipaparkan pada baris yang sama menggunakan Grid CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!