Moin.

Es gibt viele Arten einen sichtbaren Trenner zwischen horizontal angeordneten Navi-Elementen zu realisieren.

border
margin+background-color
generated content

Typischerweise setzt man eine Regel, die rechts etwas hinzufügt und entfernt dann beim "last-child" das Ganze wieder.

Gibt es einen eleganteren Weg, der von vorneherein nur /zwischen/ den Elementen etwas einfügt. Und eben nicht auch am äußersten Rand, wenn kein weiterer Nachbar mehr daneben steht.

Versteht ihr, was ich meine?
Ansonsten lege ich nach.

Danke.

__________________

Nein.
Eventuell mit CSS3 Selektoren wie :has (also nur dann, wenn das Element einen Nachfolger hat), da ist der support aber nicht wirklich *g* da.

Danke Ich war nicht sicher, ob ich was übersehen habe.

__________________

Hallo

Nein. Typischerweise (= in der Mehrheit) werden die Links oder deren parent-Container direkt ohne Abstände nebeneinander gesetzt. "Abstände" werden dann gleichmäßig per padding erzeugt.

Richtige Abstände werden aktuell mittels Flexbox oder zunehmend per CSS-Grid erzeugt.

Abstände mittels margin werden in der Praxis eher selten erstellt. Bevor es Flexbox gab waren sie häufiger zu sehen.

Grafische Elemente (durch border oder mittels Grafiken) wurden eher von Anfängern verwendet, da sie in deren Augen mehr hermachen.

Ja. Zum Beispiel ganz einfach mit nth-last-of-type oder nth-last-child.

Gruss

MrMurphy

Ja, da hast du Recht, da muss ich mein "Nein" revidieren

Wie erzeugt man denn bitte mittels Flexbox folgende Ausgabe aus einer UL?

Sowas meine zum Beispiel mit Trenner /zwischen/ den Elementen.
Die # symbolisieren die Viewport-Grenzen.

Es kann auch eine horizontale Linie sein, die über die gesamte Höhe der Box läuft (und dann so aussieht wie ein border).

__________________

Ich weiß nicht, ob ich dein Problem verstanden habe. Du kannst doch tricksen indem du zum Beispiel nur lis ansprichst die schon einen Vorgänger haben, oder last-child ausschließt:
Je nachdem, ob du links oder rechts am Element etwas stylen (oder ein Pseudoelement hinzufügen) willst. Meinst du sowas?

PS: Du meinst eine vertikale Linie oder?

@inta
Danke. Sowas meinte ich. Ich kannte eigentlich beide Selektoren, hatte sie aber wohl unbewußt als schlecht unterstützt aus der Vergangenheit abgespeichert.

Nochmal kurz zum Gestaltungsziel bei der horizontalen Navbar, wo sich die Breiten der einzelnen Menüpunkt auf die ganze Breite aufteilen und wo das trennende vertikale "border-left" in der Mitte stehen soll.

https://codepen.io/fermion/pen/MQLYvO

Falls Du was aus dem Ärmel schüttelst: gerne.

Ich muss mich in flexbox und seine Eigenheiten noch einfuchsen.

__________________

Lass die Kind-Elemente einfach mit flex-grow den gesamten Platz einnehmen:
https://codepen.io/anon/pen/PQVNdE

@inta
Vielen Dank

Flexbox ist so genial.

__________________