Bagaimana untuk Membetulkan Baris Kedua Tidak Sejajar dalam Item Senarai Berbilang Baris?

Item Li pada Dua Baris: Mengatasi Salah Jajaran dalam Baris Kedua

Apabila bekerja dengan senarai tidak tersusun, anda mungkin menghadapi senario di mana senarai item dibalut ke baris kedua, menyebabkan baris kedua diimbangi daripada yang pertama. Penjajaran salah ini boleh mengganggu estetika visual senarai anda.

Dalam contoh yang disediakan, kod HTML berikut telah digunakan untuk mencipta senarai:

<ul>
  <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
  <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
  <li><i class="fa fa-check fa-fw"></i>This is a list item that actually takes up 2 lines. Looks ugly</li>
</ul>

Isu timbul kerana ikon tandakan ( ) ialah kandungan sebaris. Apabila teks dibalut, ikon kekal pada baris yang sama, membawa kepada salah jajaran baris kedua.

Untuk menyelesaikan isu ini, anda boleh menggunakan sifat inden teks, yang menentukan jumlah ruang mendatar yang tinggal sebelum baris pertama teks dalam elemen. Dengan menetapkan nilai inden teks negatif, anda boleh mengalihkan baris pertama ke kiri, menjajarkannya dengan baris berikutnya.

li {
  text-indent: -1.28571429em;
}

Untuk mengimbangi inden negatif, anda boleh menggunakan padding positif pada elemen:

li {
  padding-left: 1.28571429em;
}

Dengan menggunakan gaya ini, anda boleh menjajarkan baris kedua item senarai dengan yang pertama, menghasilkan visual yang lebih padu pembentangan.

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