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

DDD
Lepaskan: 2024-11-05 20:46:02
asal
332 orang telah melayarinya

How to Force Line Breaks in Inline Element Lists After Specific Items?

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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan