Comment supprimer la marge de la dernière colonne sans connaître le nombre de lignes ?

Suppression de la marge de la dernière colonne sans connaissance du nombre de lignes

Dans la conception Web, il est souvent souhaitable de supprimer la marge droite pour chaque dernier élément de une rangée. Cette tâche devient difficile lorsqu'il s'agit de longueurs de lignes dynamiques, où le nombre d'éléments par ligne ne peut pas être prédéterminé.

Marges négatives

Une astuce pour obtenir cet effet consiste à ajoutez des marges négatives au conteneur parent. Cela crée l'illusion que les éléments enfants sont parfaitement alignés au sein du parent, tout en conservant l'espacement souhaité entre eux :

ul {
    margin-left: -5px;
    margin-right: -5px;
}

li {
    margin-left: 5px;
    margin-right: 5px;
}

Étant donné que margin-left et margin-right sont appliqués de manière égale, ils peuvent accueillir à la fois LTR (gauche -à droite) et positionnement des éléments RTL (de droite à gauche). Cependant, cela peut nécessiter l'ajout de overflow-x: Hidden pour empêcher le défilement horizontal.

Requêtes média

Une solution alternative consiste à utiliser des requêtes média pour cibler le dernier élément de chaque rangée. Cette approche est moins concise que l'utilisation de marges négatives mais offre un meilleur contrôle sur les ajustements de style :

@media (min-width: 400px) and (max-width: 499px) {
    li:nth-child(even) {
        margin-right: 0;
        border-right: none;
    }
}
/* ... */

En spécifiant des requêtes multimédias pour différentes tailles d'écran, il est possible de définir le style du dernier élément pour différentes longueurs de 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!