Comment supprimer les marges des derniers éléments d'une ligne sans :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>

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>

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!