CSS Horizontale Navi-Leiste mit gleichen Abständen über die volle Breite

Crys · 27. Juli 2015

Ich möchte eine Navi-Leiste bauen, in der die Elemente <a> eine flexible Breite haben (durch den Text bestimmt), der Abstand zwischen den Elementen gleich groß ist und die Elemente selbst den Inhalt des Abstandes einnehmen (durch padding).
Die Breite des <nav> Elementes ist fest, die Anzahl der <a> Elemente darin ist dynamisch.

Zum Betrachten: http://jsfiddle.net/b6ya9gxm/

HTML:

<html>
<head>
    <title>NaviBar</title>
    <meta charset="UTF-8" />
    
    <style type="text/css">
        nav {
            width: 678px;
            background-color: yellow;
            padding: 0;
            margin: 0;
        }
        a {
            display: inline-flex;
            background-color: red;
            padding: 5px auto;   
        }
    </style>
</head>
<body>

<nav>
    <a href='#'>Kurzer Text</a>
    <a href='#'>Text</a>
    <a href='#'>Längerer Text hier</a>
    <a href='#'>Noch ein Text</a>
</nav>

</body>
</html>

Wie stelle ich das (mittels CSS) ohne Tabellen an?

Yuuri · 27. Juli 2015

Code:

a {
    // ...
    float: left;
    width: 25%;
}

Und das Padding entfernen, denn 25% + x passen nicht komplett drauf.

Lavaground · 27. Juli 2015

Code:

padding: 5px auto;

geht schonmal nicht, auto ist hier nicht valide. im gegensatz zu

Code:

margin: Xpx auto;

ich sehe schon ein:

Code:

<nav>
   <ul>
      <li>
        <a href='#'>Kurzer Text</a>
      </li>
      <li>
        <a href='#'>Text</a>
      </li>
      <li>
        <a href='#'>Längerer Text hier</a>
      </li>
      <li>
        <a href='#'>Noch ein Text</a>
      </li>
   </ul>
</nav>

kommen xD

Crys · 27. Juli 2015

Danke euch, aber mit dem float klappt das nicht. Die Navi-Leiste ragt dann nach unten: http://jsfiddle.net/b6ya9gxm/4/

Auch ein clear bringt nichts. Und das 'nav'-Element sollte alle Einträge (im Hintergrund) beinhalten, also darunter liegen.

Alle <a> Elemente müssen die selbe Höhe haben, denn ich füge eine HIntergrundgrafik ein.

T0a5tbr0t · 28. Juli 2015

Das Zusammenklappen vom Elternelement kann man einfach mit "overflow: hidden" verhindern. Damit wird das Element unabhängig von seinem Inhalt. Floats sind für solche Anordnungen ursprünglich nicht gedacht und verhalten sich da manchmal etwas merkwürdig.

Wenn die Links immer eine identische Höhe haben sollen wird es mit Floats eng. Da würde ich einfach Flexbox nehmen. Damit sind Margins, Borders etc. auch alles kein Problem mehr. Außerdem ist die Anzahl an Links egal, es funzt einfach.
https://jsfiddle.net/b6ya9gxm/5/
Hier ist ne gute Übersicht:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
Links sind alle Eigenschaften für das Eltern-Element (nav), Rechts alle für die Kinder darin.

Crys · 28. Juli 2015

Vielen Dank Toast!

Ich dachte schon das ich mit dem float nicht glücklich werde. Ich wusste aber nicht ob die Flex Boxen das richtige sind, du hast mich da auf den Richtigen Weg gebracht

Eine Kleinigkeit passt aber noch nicht ganz, ich würde gerne die Schrift vertikal mittig ausgerichtet haben wollen.
Ist das möglich, denn vertical-align: middle; zeigt (nicht ganz verwunderlich) keine Wirkung.
https://jsfiddle.net/b6ya9gxm/6/

T0a5tbr0t · 28. Juli 2015

vertical-align geht nur in Tabellen.
Mit automatischen Zeilenumbruch ist das in der Tat nicht so einfach.
So würde es mit FlexBox gehen:
https://jsfiddle.net/b6ya9gxm/7/
Der Text in den Links ist in einem extra span und die Links richten es mit flex-direction: column und justify-content:center aus. Ohne extra Tag kenne ich auch keine Lösung.

Crys · 31. Juli 2015

Vielen Dank T0a5tbr0t!
Im FF (und IE) sieht das jetzt super aus, wie ich mir das vorgestellt habe.

Nur im Chrome und iOS Safari werden die einzelnen Elemente über die komplette breite gezogen. Am PC Safari werden die Boxen gar nicht erkannt.
Weiß jemand da Abhilfe, die kompatiblitäts Codes sind ja schon drin!?

Suche

CSS Horizontale Navi-Leiste mit gleichen Abständen über die volle Breite

Crys

Lt. Commander

Yuuri

Fleet Admiral

Lavaground

Lt. Commander

Crys

Lt. Commander

T0a5tbr0t

Lieutenant

Crys

Lt. Commander

T0a5tbr0t

Lieutenant

Crys

Lt. Commander

Ähnliche Themen