Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Menghapuskan Margin pada Baris Kedua Item Senarai Dua Baris?

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

Patricia Arquette
Patricia Arquetteasal
2024-12-24 11:56:11713semak imbas

How Can I Eliminate the Margin on the Second Line of a Two-Line List Item?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn