Heim > Web-Frontend > CSS-Tutorial > Wie kann verhindert werden, dass Listenelemente in mehrspaltigen Layouts spaltenübergreifend aufgeteilt werden?

Wie kann verhindert werden, dass Listenelemente in mehrspaltigen Layouts spaltenübergreifend aufgeteilt werden?

DDD
Freigeben: 2024-12-16 11:28:11
Original
299 Leute haben es durchsucht

How to Prevent List Items from Breaking Across Columns in Multi-Column Layouts?

Spaltenumbrüche innerhalb von Elementen verhindern

In einem mehrspaltigen Layout kann es vorkommen, dass einzelne Listenelemente spaltenübergreifend umbrochen werden. Um dieses unerwünschte Verhalten zu verhindern, kann die CSS-Eigenschaft „break-inside“ verwendet werden.

Verwendung von „break-inside“

Insbesondere wird dies durch die Einstellung von „break-inside:void-column“ für die Listenelementelemente sichergestellt Sie bleiben in einer einzigen Spalte erhalten:

.x li {
    break-inside: avoid-column;
}
Nach dem Login kopieren

Firefox-Kompatibilität Probleme

Leider unterstützt Firefox seit Oktober 2021 die Break-Inside-Eigenschaft nicht mehr. Während Sie es in anderen gängigen Browsern verwenden können, benötigen Sie eine Problemumgehung für Firefox.

Problemumgehung für Firefox

Eine weniger wünschenswerte Lösung für Firefox besteht darin, geschützte Inhalte in eine Tabelle einzuschließen:

<div class='x'>
    <table>
        <tr><td>Number one</td></tr>
        <tr><td>Number two (longer)</td></tr>
        <tr><td>Number three</td></tr>
    </table>
</div>
Nach dem Login kopieren

Firefox 20-Unterstützung (teilweise)

Firefox 20 hat Unterstützung eingeführt für page-break-inside: vermeiden, löst das Problem mit Listen jedoch nicht vollständig. Der folgende Code zeigt, dass weiterhin Elemente beschädigt werden:

.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;
}
Nach dem Login kopieren
<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>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass Listenelemente in mehrspaltigen Layouts spaltenübergreifend aufgeteilt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage