Heim  >  Artikel  >  Web-Frontend  >  Wie entfernt man dynamisch Ränder von den letzten Elementen in Zeilen?

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

Barbara Streisand
Barbara StreisandOriginal
2024-11-01 05:48:02886Durchsuche

How Do You Dynamically Remove Margins from Last Elements in Rows?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn