Comment supprimer les marges des derniers éléments d'une ligne dynamique en CSS ?

Supprimer les marges des derniers éléments des lignes

En CSS, supprimer les marges d'éléments spécifiques dans une ligne peut être difficile, en particulier lorsque le nombre d'éléments dans chaque ligne est dynamique et inconnu. Cependant, il existe des techniques pour obtenir cet effet.

Marges négatives

Une solution consiste à utiliser des marges négatives sur l'élément parent. Cela crée une illusion d'optique en poussant visuellement les éléments enfants dans le parent, éliminant ainsi l'espacement entre eux.

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

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

Requêtes multimédias

Si vous pouvez prédire le nombre d'éléments dans chaque rangée, vous pouvez utiliser des requêtes multimédias et le sélecteur nth-child() pour cibler le dernier élément de chaque ligne. Cela permet des ajustements de style plus granulaires :

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

Bien que cette méthode soit plus détaillée, elle offre une plus grande flexibilité dans le style des éléments spécifiques dans chaque 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!