Wie entfernt man dynamisch Ränder von den letzten Elementen in Zeilen?

Dynamisches Entfernen von Rändern für letzte Elemente in Zeilen

Problem:Rand wird vom letzten Element jeder Zeile in einer Liste entfernt, auch wenn Die Anzahl der Elemente pro Zeile ändert sich dynamisch mit der Bildschirmgröße.

Herausforderung: Herkömmliche CSS-Randentfernungstechniken wie :last-child { margin-right: 0 } befassen sich nur mit dem Finale Element der Liste.

Lösung:

Option 1: Negative Ränder

Konzept: Negative Ränder auf das übergeordnete Element anwenden Element, um die Ränder der untergeordneten Elemente zu versetzen.

Beispiel:

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

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

Option 2: Medienabfragen

Konzept:Verwenden Sie Medienabfragen, um das letzte Element in jeder Zeile basierend auf der Anzahl der Elemente pro Zeile anzusprechen.

Beispiel:

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

Vorteile:

• Ausführlich, ermöglicht aber mehr Anpassungsmöglichkeiten.

Nachteile:

• Erfordert manuelle Berechnung und Medien Abfragen für jedes Szenario.

Auswahl: Die beste Lösung hängt von den spezifischen Designanforderungen und der Flexibilität ab. Negative Margen sind einfacher, während Medienabfragen mehr Kontrolle bieten.

Das obige ist der detaillierte Inhalt vonWie entfernt man dynamisch Ränder von den letzten Elementen in Zeilen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!