Wie entferne ich die Marge von jedem <li> der letzten Spalte? Ich frage nach jedem <li> , das in der letzten Spalte kommt, wenn ich 9 <li> und 3 in jeder Spalte habe. Ich möchte nicht nur margin vom letzten Element des letzten <li> eines <ul> entfernen, das ich bereits kenne :last-child { margin-right: 0 }
Wenn der Bildschirm klein ist oder der Benutzer die Größe des Browsers ändert, kann 3 + 3 + 3 zu 4 + 5 oder 2 + 2 + 2 + 2 werden + 1
Also in jeder Bedingung irgendeine <li> (es kann eine oder mehrere sein), die in der letzten Spalte kommt. Ich möchte margin-right entfernen.
Alle li befinden sich in einer einzelnen ul
%Vor%Ich habe jsfiddle hier hinzugefügt: Ссылка
Das Entfernen oder Hinzufügen von Stylings zu einem bestimmten Element jeder Zeile kann nicht mit reinem CSS erfolgen, es sei denn, Sie wissen genau, wie viele Elemente es pro Zeile gibt (über die Auswahlfamilie nth-child() ).
Was Sie tun können im Falle von Margen sind, tarnen Sie sie, indem Sie negative Ränder für das Elternelement hinzufügen. Dies gibt Ihnen die Illusion, dass Ihre untergeordneten Elemente in das übergeordnete Element passen und dennoch Abstände zwischen den einzelnen Elementen aufweisen:
%Vor% Wenn Sie den Rand in zwei Hälften teilen und auf beide Seiten setzen ( margin-left: 5px; margin-right: 5px ), können bessere Ergebnisse erzielt werden als auf einer Seite ( margin-right: 10px ), insbesondere wenn Ihr Design mit LRT und
Hinweis: Dies erfordert möglicherweise das Hinzufügen von overflow-x: hidden für ein Vorfahrelement, um horizontales Scrollen zu verhindern, abhängig davon, wie nahe das Containerelement an der Kante des Ansichtsfensters positioniert ist.
Wenn Sie vernünftigerweise vorhersagen können, wie viele Elemente pro Zeile angezeigt werden, können Sie mithilfe von Medienabfragen das letzte Element in der Zeile über nth-child() anvisieren. Dies ist wesentlich ausführlicher als die Verwendung negativer Ränder, aber Sie können auch andere Stilanpassungen vornehmen:
Ich glaube, das ist was du willst (jquery):
Wenn diese Geige zeigt, was Sie suchen (außer mit Rand statt Hintergrundfarbe), können Sie das nicht mit CSS tun. Sie werden Javascript benötigen. Wenn jQuery akzeptabel ist, kann diese veröffentlichte Geige leicht modifiziert werden. Wäre relativ trivial, um es auch in reine js zu verwandeln.
Bearbeiten: Antwort wurde nach dem Betrachten von Beispiel-HTML neu geschrieben
Was Sie tun möchten, ist mit CSS nicht möglich. Der Grund dafür ist, dass Sie Elemente basierend auf dem gerenderten Layout stylen möchten. Mit CSS können Sie basierend auf der Dokumentstruktur nur arbeiten.
So etwas ist nur mit clientseitigem Scripting (Javascript) erreichbar, das gerenderte Layout-Eigenschaften abfragen und entsprechend handeln kann.