Wie entferne ich Ränder von den letzten Elementen in einer Zeile ohne :last-child?

Ränder von den letzten Elementen in einer Reihe entfernen

Das Entfernen von Rändern von den letzten Elementen in einer Reihe ist eine häufige Herausforderung im Webdesign. Während :last-child verwendet werden kann, um Ränder vom letzten Element in einer Liste zu entfernen, ist dieser Ansatz nicht ideal, wenn Elemente eine dynamische Größe haben oder wenn eine unbekannte Anzahl von Elementen pro Zeile vorhanden ist.

Negative Ränder

Eine Lösung besteht darin, negative Ränder für das übergeordnete Element zu verwenden. Dieser Ansatz erzeugt die Illusion, dass untergeordnete Elemente in das übergeordnete Element passen und gleichzeitig der Abstand zwischen einzelnen Elementen erhalten bleibt:

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

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

Diese Technik erfordert jedoch möglicherweise zusätzliche Stile, wie z. B. overflow-x:hidden, um horizontales Scrollen zu verhindern .

Medienabfragen

Wenn die Anzahl der Elemente pro Zeile vorhersehbar ist, können Medienabfragen verwendet werden, um mit nth-child() auf die letzten Elemente in einer Zeile abzuzielen. Diese Option ist ausführlicher als negative Ränder, ermöglicht jedoch eine detailliertere Stilsteuerung:

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

Der spezifische verwendete Selektor für das n-te Kind variiert je nach Anzahl der Elemente pro Zeile.

Das obige ist der detaillierte Inhalt vonWie entferne ich Ränder von den letzten Elementen in einer Zeile ohne :last-child?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!