Wie entferne ich Ränder vom letzten Element in einer Zeile, wenn die Zeilengröße variiert?

So entfernen Sie Ränder von den letzten Elementen in einer Zeile (unabhängig von der Zeilengröße)

In Situationen, in denen Sie mehrere Elemente in einer Zeile haben Da die Anzahl der Elemente pro Zeile dynamisch variieren kann, kann das Entfernen von Rändern vom letzten Element in jeder Zeile mit reinem CSS eine Herausforderung sein.

Negative Ränder verwenden

Eins Eine effektive Technik besteht darin, negative Ränder für das übergeordnete Element zu verwenden. Dadurch entsteht die Illusion, dass untergeordnete Elemente perfekt in die übergeordneten Elemente passen und gleichzeitig der Abstand zwischen ihnen beibehalten wird.

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

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

Indem Sie den Rand teilen und auf beide Seiten anwenden, können Sie bessere Ergebnisse erzielen, insbesondere bei Designs, die Kompatibilität erfordern mit Ausrichtung von links nach rechts (LTR) und von rechts nach links (RTL).

Verwendung von Medienabfragen

Ein anderer Ansatz, wenn Sie das vorhersagen können Anzahl der Elemente pro Zeile innerhalb bestimmter Bildschirmgrößen, besteht darin, Medienabfragen zu verwenden, um mit nth-child() auf die letzten Elemente in Zeilen abzuzielen. Diese Methode ermöglicht spezifischere Styling-Anpassungen:

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

Das obige ist der detaillierte Inhalt vonWie entferne ich Ränder vom letzten Element in einer Zeile, wenn die Zeilengröße variiert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!