Maison > interface Web > tutoriel CSS > Comment empêcher les éléments de liste de se répartir entre les colonnes dans les mises en page multi-colonnes ?

Comment empêcher les éléments de liste de se répartir entre les colonnes dans les mises en page multi-colonnes ?

DDD
Libérer: 2024-12-16 11:28:11
original
298 Les gens l'ont consulté

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

Prévenir les sauts de colonnes dans les éléments

Dans une mise en page à plusieurs colonnes, vous pouvez rencontrer des cas où des éléments de liste individuels sont répartis dans les colonnes. Pour éviter ce comportement indésirable, la propriété CSS break-inside peut être utilisée.

Utiliser break-inside

Plus précisément, la définition de break-inside: évite-column pour les éléments de la liste garantira que ils sont conservés intacts dans une seule colonne :

.x li {
    break-inside: avoid-column;
}
Copier après la connexion

Compatibilité Firefox Problèmes

Malheureusement, depuis octobre 2021, Firefox ne prend pas en charge la propriété break-inside. Bien que vous puissiez l'utiliser dans d'autres navigateurs majeurs, vous aurez besoin d'une solution de contournement pour Firefox.

Solution de contournement pour Firefox

Une solution moins souhaitable pour Firefox consiste à envelopper le contenu insécable dans un tableau :

<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>
Copier après la connexion

Support de Firefox 20 (partiel)

Firefox 20 a introduit la prise en charge de page-break-inside : à éviter, mais cela ne résout pas complètement le problème des listes. Le code suivant montre qu'il casse toujours des éléments :

.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;
}
Copier après la connexion
<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>
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal