|
|||
Menü mit Flexbox
Hallo zusammen,
ich habe da im Moment ein massives CSS-Problem. Ich möchte ein Menü erstellen, wo die Menüpunkte,die gleiche Höhe haben, über die zur Verfügung stehende Breite verteilt sind und der Text in den Schlatflächen zentriert (horizontal und vertikal) sind. Mein Lösungsansatz mit Flexbox findet Ihr hier: https://jsfiddle.net/3f4Lpvfp/ HTML-Code:
<ul> <li><span>Item</span></li> <li><span>Item</span></li> <li><span>Item - much much much much more longer</span></li> </ul> HTML-Code:
body { width: 70%; } ul { display: flex; justify-content: space-between; flex-direction: row; align-items: center; } li { width: 30.25%; height: 100%; padding: 5px; display: flex; flex-direction: column; justify-content: center; background: yellow; border: 1px solid #333; } span { text-align: center; display: block; align-self: center; color: blue; } Hat vielleicht irgendwer eine Idee? LG Volker So soll es werden: Geändert von Pavenstaedter (20.02.2017 um 11:00 Uhr) |
Sponsored Links |
|
|||
Hallo
Ich sehe für die span-Elemente weder Sinn noch Bedarf. Also besser und übersichtlicher: Code:
<ul> <li>Item</li> <li>Item</li> <li>Item - much much much much more longer</li> </ul> Dann, zu besseren Übersicht, zunächst die CSS-Angaben, die mit Flexbox nix zu tun haben: Code:
body { width: 70%; } li { background: yellow; color: blue; text-align: center; padding: 5px; border: 1px solid #333; } Code:
ul { display: flex; } li { flex-grow: 1; flex-shrink: 1; flex-basis: 1px; } Code:
li { display: flex; justify-content: center; align-items: center; } Code:
body { width: 70%; } ul { display: flex; } li { background: yellow; color: blue; text-align: center; padding: 5px; border: 1px solid #333; flex-grow: 1; flex-shrink: 1; flex-basis: 1px; display: flex; justify-content: center; align-items: center; } MrMurphy Geändert von MrMurphy (20.02.2017 um 12:22 Uhr) |
|
|||
Hier hast du eine gute Übersicht über alle Dinge, die so mit Flexbox möglich sind, kann ich nur empfehlen: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
|
Stichwörter |
centered, css, flexbox |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Slide Menü | Philidor | Javascript & Ajax | 12 | 05.09.2013 00:32 |
Menü auf Startseite funktioniert nach FORM SUBMIT nicht mehr | Ceres82 | (X)HTML | 3 | 23.08.2013 22:00 |
Verhalten fixed Menü beim Verkleinern des Fensters | Yumyoko | CSS | 1 | 07.10.2011 17:54 |
Darstellungsproblem | flohpapa | CSS | 3 | 16.12.2009 09:55 |
Umbruch in einem LI bei horizontalem Menü | M4rco | CSS | 12 | 13.10.2006 12:26 |