Comment supprimer les marges du dernier élément d'une ligne lorsque la taille de la ligne varie ?

Comment supprimer les marges des derniers éléments d'une ligne (quelle que soit la taille de la ligne)

Dans les situations où vous avez plusieurs éléments d'affilée , et le nombre d'éléments par ligne peut varier dynamiquement, supprimer les marges du dernier élément de chaque ligne peut être difficile en utilisant du CSS pur.

Utiliser des marges négatives

Un une technique efficace consiste à utiliser des marges négatives sur l’élément parent. Cela crée l'illusion que les éléments enfants s'intègrent parfaitement dans le parent tout en conservant un espacement entre eux.

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

li {
    margin-left: 5px;
    margin-right: 5px;
}</code>

En divisant la marge et en l'appliquant des deux côtés, vous pouvez obtenir de meilleurs résultats, en particulier pour les conceptions qui nécessitent une compatibilité. avec des orientations de gauche à droite (LTR) et de droite à gauche (RTL).

Utiliser les requêtes multimédias

Une autre approche, si vous pouvez prédire le nombre d'éléments par ligne dans des tailles d'écran spécifiques, consiste à utiliser des requêtes multimédias pour cibler les derniers éléments des lignes à l'aide de nth-child(). Cette méthode permet des ajustements de style plus spécifiques :

<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;
    }
}

/* Add more media queries as needed... */</code>

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!