Comment forcer les sauts de ligne dans les listes d'éléments en ligne après des éléments spécifiques ?

Saut de ligne dans le contenu de bloc en ligne

Considérons une situation où le contenu HTML contient une liste d'éléments représentés à l'aide d'éléments li de bloc en ligne. Le but est d'injecter un saut de ligne après le troisième élément li pour créer un effet à trois colonnes.

Limitations du CSS

Le principe est que l'ajout d'un saut de ligne entre des éléments de bloc en ligne spécifiques en utilisant directement CSS n'est pas réalisable. Des méthodes telles que l'insertion d'un pseudo-élément :after avec content: "xxx" et display: block ou la sélection du troisième li avec :nth-child ne suffiront pas.

Solution de contournement pour les éléments en ligne

Cependant, il existe une solution de contournement si les éléments li sont modifiés de display: inline-block à display: inline. En ajoutant du CSS comme suit, un saut de ligne peut être injecté après le troisième élément li :

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

Dans cet exemple, "A" insère un saut de ligne et white-space: pre le préserve dans l'inline contexte.

Conclusion

Bien qu'il ne soit pas possible d'injecter directement des sauts de ligne entre des éléments de bloc en ligne à l'aide de CSS, cette solution de contournement démontre qu'elle est réalisable avec des éléments en ligne, fournissant une solution potentielle au besoin de diviser le contenu en colonnes ou de modifier le flux au sein du contenu en ligne.

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!