Bagaimanakah saya boleh menjajarkan elemen `dt` dan `dd` dalam senarai definisi secara mendatar menggunakan reka letak grid sebaris?

Melaksanakan Reka Letak Grid Sebaris untuk Elemen dt dan dd

Dalam senarai definisi (

), istilah (< dt>) dipaparkan di atas takrifan (

). Untuk menjajarkan elemen ini sebaris, kami boleh menggunakan reka letak grid CSS.

Reka letak grid menyediakan pendekatan serba boleh untuk menentukan reka letak elemen pada halaman web. Ia membolehkan kami mengedarkan kandungan ke dalam lajur dan baris serta menentukan saiz setiap kawasan grid.

Untuk membuat grid sebaris bagi elemen dt dan dd, kami menggunakan CSS berikut:

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

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
}

Salin selepas log masuk

Dalam kes ini:

• paparan: grid; menetapkan elemen dl kepada bekas grid.
• lajur-templat-grid: automatik kandungan maksimum; mentakrifkan dua lajur untuk grid. Lajur pertama akan melaraskan lebarnya secara automatik berdasarkan kandungannya, manakala lajur kedua akan mengisi ruang yang tinggal.
• grid-column-start: 1; letakkan elemen dt dalam lajur pertama grid.
• grid-lajur-mula: 2; meletakkan elemen dd dalam lajur kedua grid.

Dengan melaksanakan reka letak grid ini, elemen dt dan dd akan dipaparkan secara mendatar dengan setiap pasangan menduduki satu baris. Ini menjajarkan terma dan takrifan seperti yang dikehendaki.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menjajarkan elemen `dt` dan `dd` dalam senarai definisi secara mendatar menggunakan reka letak grid sebaris?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!