Wie lautet denn das Coding in CSS wenn ich in der Navbar z.B. 3 Tags links haben möchte und eins rechts?

Hallo zusammen,

also Coding Anfänger hätte ich eine Frage wie oben schon beschrieben.

Layout wäre dann wie folgt.

'x''y''z' Space 'a'

Wäre nett wenn mir da kurz jemand helfen könnte, danke.

Liebe Grüße

Answer 1

[Babelfish]

Ohne dein bisheriges CSS zu kennen, kann man da nicht wirklich helfen. Es gibt zig Wege so was zu erreichen. Ich würde Flexbox nehmen und mit margin-left:auto die Elemente rechts platzieren:

HTML

<nav class="nav">
 <button>1</button>
 <button>2</button>
 <button>3</button>
 <button class="right">4</button>
</nav>

CSS

.nav {
 display: flex;
}
.nav button {
 margin-right: .5rem;
 margin-left: .5rem;
}
.nav button.right {
 margin-left: auto;
}

Beispiel

https://jsfiddle.net/Ln43cots/

Woher ich das weiß: Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.

Comments

[Sissleys]

Genau das wollte ich wissen. Danke hast mir schon geholfen😌

Answer 2

[BeamerBen]

Könnte man über eine Flexbox machen, es gibt im MDN sogar ein Beispiel für genau diesen Use Case:

MDN Layout Cookbook: Split navigation

Mehr dazu findest du in der Dokumentation zu Flexbox und Alignment:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container#using_auto_margins_for_main_axis_alignment

Answer 3

[FaTech]

Mach 2 Container. (Div).

Einer links, einer rechts.

Dann setzt du flexbox space-between drauf. Das sollte gehen. Siehe: https://css-tricks.com/snippets/css/a-guide-to-flexbox