Wie entferne ich den letzten Spaltenrand, ohne die Zeilenanzahl zu kennen?

Letzte Spaltenränder entfernen ohne Kenntnisse über die Zeilenanzahl

Im Webdesign ist es oft wünschenswert, den rechten Rand für jedes letzte Element zu entfernen eine Reihe. Diese Aufgabe wird zu einer Herausforderung, wenn es um dynamische Zeilenlängen geht, bei denen die Anzahl der Elemente pro Zeile nicht vorherbestimmt werden kann.

Negative Ränder

Ein Trick, um diesen Effekt zu erzielen, ist: Fügen Sie dem übergeordneten Container negative Ränder hinzu. Dadurch entsteht die Illusion, dass untergeordnete Elemente perfekt innerhalb des übergeordneten Elements ausgerichtet sind und gleichzeitig der gewünschte Abstand zwischen ihnen beibehalten wird:

ul {
    margin-left: -5px;
    margin-right: -5px;
}

li {
    margin-left: 5px;
    margin-right: 5px;
}

Da margin-left und margin-right gleichermaßen angewendet werden, können sie beide LTR (links) aufnehmen -nach-rechts) und RTL-(von-rechts-nach-links) Elementpositionierung. Es kann jedoch erforderlich sein, overflow-x:hiden hinzuzufügen, um horizontales Scrollen zu verhindern.

Medienabfragen

Eine alternative Lösung besteht darin, Medienabfragen zu verwenden, um jeweils auf das letzte Element abzuzielen Reihe. Dieser Ansatz ist weniger prägnant als die Verwendung negativer Ränder, bietet aber eine bessere Kontrolle über Stilanpassungen:

@media (min-width: 400px) and (max-width: 499px) {
    li:nth-child(even) {
        margin-right: 0;
        border-right: none;
    }
}
/* ... */

Durch die Angabe von Medienabfragen für verschiedene Bildschirmgrößen ist es möglich, den Stil des letzten Elements für verschiedene Zeilenlängen zu definieren.

Das obige ist der detaillierte Inhalt vonWie entferne ich den letzten Spaltenrand, ohne die Zeilenanzahl zu kennen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!