Bagaimana untuk Mencegah Pecah Lajur dalam Item Senarai dalam CSS?

Cegah Pecah Lajur dalam Elemen

Dalam bidang CSS dan reka bentuk responsif, selalunya wajar untuk memastikan elemen tertentu kekal utuh dalam lajur tertentu. Pertimbangkan struktur HTML ini mewakili senarai:

<div class='x'>
    <ul>
        <li>Number one</li>
        <li>Number two</li>
        <li>Number three</li>
        <li>Number four is a bit longer</li>
        <li>Number five</li>
    </ul>
</div>

Sekarang, mari gunakan beberapa CSS untuk mencipta berbilang lajur:

.x {
    -moz-column-count: 3;
    column-count: 3;
    width: 30em;
}

Pada mulanya, Firefox memaparkannya seperti berikut:

• Number one    • Number three          bit longer
• Number two    • Number four is a    • Number five

Seperti yang terbukti, item empat dibahagikan antara lajur kedua dan ketiga. Untuk mengelakkan perkara ini, sifat CSS pecah masuk membantu kami:

.x li {
    break-inside: avoid-column;
}

Malangnya, Firefox pada masa ini kekurangan sokongan untuk harta ini. Oleh itu, penyelesaian alternatif diperlukan untuk Firefox. Satu penyelesaian melibatkan membungkus kandungan tidak pecah dalam jadual, walaupun ini kurang ideal.

Kemas kini:

Firefox 20 termasuk sokongan untuk pemecahan halaman di dalam : elakkan sebagai mekanisme untuk mengelakkan pemecahan lajur. Walau bagaimanapun, kod berikut menunjukkan bahawa ia tidak berfungsi seperti yang diharapkan untuk senarai:

.x {
    column-count: 3;
    width: 30em;
}

.x ul {
    margin: 0;
}

.x li {
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside:avoid;
    -moz-page-break-inside:avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
}

<div class='x'>
    <ul>
        <li>Number one, one, one, one, one</li>
        <li>Number two, two, two, two, two, two, two, two, two, two, two, two</li>
        <li>Number three</li>
    </ul>
</div>

Atas ialah kandungan terperinci Bagaimana untuk Mencegah Pecah Lajur dalam Item Senarai dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!