Bagaimana untuk Menjajarkan Item Senarai Dua Baris dengan Baris Kedua Tidak Sejajar?

Item Li pada dua baris. Baris kedua tidak mempunyai jidar

Apabila berurusan dengan item senarai yang merentangi dua baris, supaya baris kedua tidak sejajar dengan yang pertama, ia menjadi perlu untuk melaksanakan penjajaran. Keadaan ini berlaku terutamanya kerana elemen sebaris dalam senarai membenarkan teks seterusnya mengalir tanpa menjejaskan penjajarannya.

Untuk menangani isu ini, adalah mungkin untuk mengeksploitasi sifat 'indent-teks'. Sifat ini mengawal jarak sebelum permulaan baris pertama teks dalam elemen. Dengan menggunakan nilai 'indent-teks' negatif, baris pertama boleh dialihkan jumlah tertentu ke kiri. Anjakan ini kemudiannya boleh diimbangi dengan nilai 'padding-left' yang positif, menghasilkan penjajaran yang diingini.

Pertimbangkan contoh ini:

ul {
  width: 300px;
}
li {
  padding-left: 1.28571429em;
  text-indent: -1.28571429em;
}

Dalam contoh ini, '1.28571429em' nilai sepadan dengan lebar elemen ikon 'font-hebat' yang bertanggungjawab untuk tanda semak. Menggunakan teknik ini membolehkan teks menjajarkan di bawah ikon pada kedua-dua baris, membetulkan salah jajaran.

Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Item Senarai Dua Baris dengan Baris Kedua Tidak Sejajar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!