Wie man einen bestimmten Link im Header nach rechts verschiebt

Entwickler
,
1

Großartiger TC, eine kurze Frage zum Verschieben des .links-Abschnitts nach rechts mit CSS. Ich habe versucht, einen einzelnen Link von .nav .nav-pills nach rechts zu verschieben, konnte dies aber nicht erreichen. Ich kann den gesamten .contents mit justify-content: right verschieben, aber das funktioniert nicht für den .links-Abschnitt, und ich kann das Zusammenspiel zwischen den Flexbox- und den Nicht-Flexbox-Teilen des Headers nicht verstehen.

Ich habe nichts im Bereich Icons, aber ich habe versucht, ein Icon zu konfigurieren, um zu lernen, warum sie sich ganz rechts befinden, aber irgendwie entzieht es sich mir immer noch.

Hat jemand einen einfachen CSS-Schnipsel, der die Links nach rechts verschiebt?

1 „Gefällt mir“
2

Hallo Marcus,
Wenn ich das richtig verstehe, sollte dieses SCSS das tun, was du möchtest:

.b-header nav.links {
    .nav-pills, & {
        display: flex;
        flex: 1;
        li:last-child {
            margin-left: auto;
        }
    }
}

image
image1362×126 9.61 KB

3 „Gefällt mir“
3

Funktioniert perfekt, danke @Canapin!
Ich hatte padding-left: auto auf dem entsprechenden Element versucht, aber nicht margin-left: auto! Mein CSS-Fu ist nicht stark.

2 „Gefällt mir“
4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.