Heim > Artikel > Web-Frontend > Wie entfernt man dynamisch Ränder von den letzten Elementen 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:
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>
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:
Nachteile:
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!