Bagaimana untuk Menjajarkan Elemen dt dan dd pada Baris yang Sama Menggunakan Tata Letak Grid CSS?

Menjajarkan Elemen dt dan dd pada Baris Yang Sama

Untuk menjajarkan kandungan elemen dt dan dd secara mendatar, membenarkan setiap pasangan senarai definisi berada pada baris yang sama, susun atur grid CSS menawarkan penyelesaian yang berkesan.

Reka Letak Grid CSS

Sama seperti jadual, susun atur grid menyediakan keupayaan untuk menyusun elemen ke dalam lajur dan barisan. Dengan memanfaatkan sifat grid-template-columns, anda boleh menentukan saiz lajur.

Contoh Code

Untuk mencapai reka letak yang diingini, ikut langkah berikut:

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

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
}

Dalam kod ini:

• elemen dl diberi susun atur grid.
• lajur-templat-grid mentakrifkan dua lajur, di mana yang pertama mempunyai maksimum saiz kandungan untuk menampung elemen dt, dan yang kedua mempunyai lebar bersaiz automatik untuk elemen dd.
• elemen dt diletakkan dalam lajur pertama (grid-column-start: 1).
• elemen dd diletakkan dalam lajur kedua (grid-column-start: 2).

Result

Menggunakan kod ini mengubah HTML yang disediakan menjadi format jadual, dengan setiap istilah dt dan definisi dd yang sepadan diselaraskan pada baris yang sama.

Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Elemen dt dan dd pada Baris yang Sama Menggunakan Tata Letak Grid CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!