Comment supprimer dynamiquement les marges des derniers éléments des lignes ?

Suppression dynamique des marges pour les derniers éléments des lignes

Problème : Suppression de la marge du dernier élément de chaque ligne d'une liste, même lorsque le nombre d'éléments par ligne change dynamiquement avec la taille de l'écran.

Défi : Les techniques traditionnelles de suppression de marge CSS, telles que :last-child { margin-right: 0 }, ne traitent que la finale élément de la liste.

Solution :

Option 1 : Marges négatives

Concept :Appliquer des marges négatives au parent élément pour décaler les marges des éléments enfants.

Exemple :

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

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

Option 2 : Requêtes multimédias

Concept : Utilisez les requêtes multimédias pour cibler le dernier élément de chaque ligne en fonction du nombre d'éléments par ligne.

Exemple :

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

Avantages :

• Verbeux mais permet plus de personnalisation.

Inconvénients :

• Nécessite un calcul manuel et des médias requêtes pour chaque scénario.

Choix : La meilleure solution dépend des exigences de conception spécifiques et de la flexibilité. Les marges négatives sont plus simples, tandis que les requêtes multimédias offrent plus de contrôle.

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!