Bagaimana Memaksa Pemisahan Garis dalam Senarai Elemen Sebaris Selepas Item Tertentu?

Pecah Baris dalam Kandungan Blok Sebaris

Pertimbangkan situasi di mana kandungan HTML mengandungi senarai item yang diwakili menggunakan elemen li blok sebaris. Matlamatnya adalah untuk menyuntik pemisah baris selepas item li ketiga untuk mencipta kesan tiga lajur.

Batasan CSS

Premisnya ialah menambah pemisah baris antara elemen blok sebaris tertentu secara langsung menggunakan CSS tidak boleh dilaksanakan. Kaedah seperti memasukkan elemen pseudo :after dengan kandungan: "xxx" dan paparan: sekat atau memilih li ketiga dengan :nth-child tidak akan mencukupi.

Penyelesaian untuk Elemen Sebaris

Walau bagaimanapun, terdapat penyelesaian jika elemen li ditukar daripada paparan: blok sebaris kepada paparan: sebaris. Dengan menambahkan CSS seperti berikut, pemisah baris boleh disuntik selepas elemen li ketiga:

<code class="CSS">li { 
    display: inline; 
}
li:nth-child(3):after { 
    content: "\A";
    white-space: pre; 
}</code>

Dalam contoh ini, "A" memasukkan pemisah baris dan ruang putih: pra mengekalkannya dalam baris sebaris konteks.

Kesimpulan

Walaupun tidak mungkin untuk menyuntik pemisah garisan secara langsung antara elemen blok sebaris menggunakan CSS, penyelesaian ini menunjukkan bahawa ia boleh dilaksanakan dengan elemen sebaris, menyediakan penyelesaian yang berpotensi untuk keperluan untuk memecahkan kandungan ke dalam lajur atau mengubah aliran dalam kandungan sebaris.

Atas ialah kandungan terperinci Bagaimana Memaksa Pemisahan Garis dalam Senarai Elemen Sebaris Selepas Item Tertentu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!