Bagaimanakah Saya Boleh Menghapuskan Margin pada Baris Kedua Item Senarai Dua Baris?

Item Li pada Dua Baris: Menghapuskan Margin pada Baris Kedua

Dalam senarai tidak teratur, pengguna sering menghadapi masalah apabila item senarai menjadi memanjang dan merentangi berbilang baris, mewujudkan penampilan yang tidak sekata. Isu ini timbul apabila baris kedua kurang jajaran, melepak melepasi jidar baris pertama. Untuk menyelesaikan masalah ini, kami akan memanfaatkan sifat CSS "text-indent" dan "padding-left."

Memahami Teks-Indent dan Padding-Left

"text-indent" menentukan jumlah ruang mendatar yang tinggal sebelum baris pertama teks dalam elemen. Dengan menggunakan nilai negatif, baris pertama boleh dialihkan ke kiri. Sebaliknya, "padding-left" mengawal ruang antara tepi kiri elemen dan kandungannya. Dengan menggunakan nilai positif, kami boleh mengimbangi lekukan.

Melaksanakan Penyelesaian

Untuk menjajarkan baris kedua dengan yang pertama, kami menggunakan kod CSS berikut:

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

Nilai "1.28571429em" adalah penting kerana ia sepadan dengan lebar ikon tanda semak digunakan oleh "font-hebat." Dengan menetapkan "indent-teks" negatif dan membatalkannya dengan "padding-left" positif, teks item senarai dialihkan ke kiri sambil mengekalkan kedudukan tanda semak.

Kesimpulan

Teknik ini membolehkan item senarai berkembang secara menegak tanpa menjejaskan penjajaran mereka. Dengan melaraskan sifat "indent-teks" dan "padding-left", pembangun boleh memperhalusi penampilan senarai tidak tertib mereka, meningkatkan estetika visual.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghapuskan Margin pada Baris Kedua Item Senarai Dua Baris?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!