Bagaimana untuk Menjajarkan Baris Kedua Item Senarai Dua Baris dalam CSS?

Item Li pada Dua Baris dengan Baris Kedua Disejajarkan

Dalam senarai tidak tersusun, anda mungkin menemui item senarai panjang yang merentangi dua baris, tetapi baris kedua tidak sejajar dengan yang pertama. Untuk menyelesaikan salah jajaran ini, manfaatkan sifat inden teks.

Sifat inden teks menentukan ruang mendatar sebelum baris pertama kandungan teks dalam elemen. Dengan menentukan nilai inden teks negatif, anda boleh mengalihkan baris pertama dalam jumlah tertentu ke kiri. Untuk mengimbangi ofset ini, gunakan nilai padding-left positif.

Dalam contoh kod yang disediakan, kelas .fa-fw mempunyai lebar 1.28571429em. Untuk menjajarkan baris kedua, kami menetapkan inden teks elemen li kepada -1.28571429em dan padding-kiri kepada 1.28571429em. Ini membatalkan offset, menyebabkan baris kedua kiri siram.

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

Melaksanakan penyelesaian ini memastikan baris kedua item senarai panjang sejajar dengan baris pertama, mewujudkan senarai tidak tertib yang seimbang secara visual.

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