Maison > interface Web > tutoriel CSS > le corps du texte

Comment supprimer les marges des derniers éléments d'une ligne sans :last-child ?

Patricia Arquette
Libérer: 2024-10-31 10:31:01
original
739 Les gens l'ont consulté

How to Remove Margins from Last Elements in a Row Without :last-child?

Supprimer les marges des derniers éléments d'une rangée

Supprimer les marges des derniers éléments d'une rangée est un défi courant dans la conception Web. Bien que :last-child puisse être utilisé pour supprimer les marges du dernier élément d'une liste, cette approche n'est pas idéale lorsque les éléments sont dimensionnés dynamiquement ou lorsqu'il y a un nombre inconnu d'éléments par ligne.

Marges négatives

Une solution consiste à utiliser des marges négatives sur l'élément parent. Cette approche crée l'illusion que les éléments enfants s'intègrent dans l'élément parent tout en préservant l'espacement entre les éléments individuels :

<code class="css">ul {
    margin-left: -5px;
    margin-right: -5px;
}

li {
    margin-left: 5px;
    margin-right: 5px;
}</code>
Copier après la connexion

Cependant, cette technique peut nécessiter un style supplémentaire, tel que overflow-x: Hidden, pour empêcher le défilement horizontal. .

Requêtes multimédias

Si le nombre d'éléments par ligne est prévisible, les requêtes multimédias peuvent être utilisées pour cibler les derniers éléments d'une ligne à l'aide de nth-child(). Cette option est plus détaillée que les marges négatives mais permet un contrôle de style plus granulaire :

<code class="css">@media (min-width: 400px) and (max-width: 499px) {
    li:nth-child(even) {
        margin-right: 0;
        border-right: none;
    }
}

@media (min-width: 500px) and (max-width: 599px) {
    li:nth-child(3n+3) {
        margin-right: 0;
        border-right: none;
    }
}

@media (min-width: 600px) and (max-width: 799px) {
    li:nth-child(4n+4) {
        margin-right: 0;
        border-right: none;
    }
}</code>
Copier après la connexion

Le sélecteur de nième enfant spécifique utilisé varie en fonction du nombre d'éléments par 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!

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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!