li-Elementen bei display: inline-block die gleiche Höhe geben

[loh]

Hallo,

ich möchte eine Reihe von Links dreispaltig darstellen. Dafür habe ich dem li display:inline-box und eine Breite von 30% zugewiesen.

Nun sind einige Listenbeschriftungen länger und werden zwei- oder sogar dreispaltig umbrochen. Die daneben stehenden Listenelemente gehen diese Höhe aber nicht mit. Das wirkt unruhig. Beispiele: springende Listenpunkte

Gibt es eine css-Möglichkeit, die Listeneinträge immer genauso lang wie ihren längsten Nachbarn aussehen zu lassen?

Ich könnte die Höhe auf einen festen em-Wert setzten. Aber dann wären selbst Listen mit schmalen Linkwörtern unnötig hoch. Das gefällt mir nicht.

Wenn es nicht mit CSS geht. Was wären die Alternativen.

Vielen Dank und mit freundlichem Gruß
loh

[Gunnar Bittersmann]

@@loh:

nuqneH

Gibt es eine css-Möglichkeit, die Listeneinträge immer genauso lang wie ihren längsten Nachbarn aussehen zu lassen?

Ja, Flexbox. (Spec, bes. §8.3 dürfte von Interesse sein)

Zu Risiken und Nebenwirkungen fragen sie caniuse.com.

Qapla'

[molily]

Hallo,

Gibt es eine css-Möglichkeit, die Listeneinträge immer genauso lang wie ihren längsten Nachbarn aussehen zu lassen?

Flexbox ist schon ideal hierfür, aber die neueste Spezifikation ist nicht breit implementiert.
Als Alternative würde ich zu display: table/table-row/table-cell und entsprechendem Markup raten. Nicht schön, aber zweckmäßig.

Mathias

[loh]

Hallo,

ich danke euch beiden und entschuldige mich, dass ich erst jetzt reagiere. Die Flexbox ist bisher total an mir vorbei gegangen und nun habe ich wiederholt stundenlang recherchiert und getüffteltn, bin aber noch zu keinem brauchbaren Ergebnis gekommen. Probleme gibt es viele:

1. Die Flexbox hat schon 3 Versionen hinter sich: “Old” Flexbox and “New” Flexbox

2. Alle Versionen werden unterschiedlich von Browsern unterstützt. Um die Flexbox auf möglichst vielen Browsern korrekt darzustellen, muss ich alle Versionen schlau geschachtelt mit Präfixen formulieren: Mixing Old and New for the Best Browser Support

3. Das Internet ist voller Beispiele, wie das gesamte Seitenlayout mit Flexbox gestaltet werden kann. In der Masse die Anwendungsbeispiele für ein einfaches, funktionierendes Listendesign zu finden ist mir bisher nicht gelungen, schon gar nicht mit der cross-Browser-Notation.

Die Links hab ich für Interessierte reingestellt, denen die Flexbox so neu ist wie mir.

Hier habe ich noch einen, der sehr schön das Potential der Flexbox demonstriert:
Advanced cross-browser flexbox

Ich werde noch etwas weiter auf der Flexbox rumkauen... vielleicht wird sie mir dabei verdaulich ;-).

Mit freundlichem Gruß
loh

[Gunnar Bittersmann]

@@loh:

nuqneH

Ich werde noch etwas weiter auf der Flexbox rumkauen... vielleicht wird sie mir dabei verdaulich ;-).

Und wenn dir das Futter ausgeht, zum Nachtisch der aktuelle Smashing-Artikel Designing CSS Layouts With Flexbox Is As Easy As Pie.

Qapla'

[Malcolm Beck´s]

مرحبا

Hier habe ich noch einen, der sehr schön das Potential der Flexbox demonstriert:
Advanced cross-browser flexbox

Ich verstehe den ganzen Hype um Flexbox nicht. Was ist so besonders an dem verlinkten Layout? Das ist mit display:inline-block in wenigen Minuten nachgebaut.

Das habe ich gerade mal gemacht. Start, 21:42 Uhr - Fertig. Das Grundlayout funktioniert sogar im IE8.

mfg

[Matthias Apsel]

Om nah hoo pez nyeetz, Malcolm Beck´s!

Ich verstehe den ganzen Hype um Flexbox nicht. Was ist so besonders an dem verlinkten Layout? Das ist mit display:inline-block in wenigen Minuten nachgebaut.

Du kannst diesen Artikel lesen und dir für jedes einzelne Beispiel dort die Frage stellen, welchen Aufwand du betreiben müsstest.

Vor allem in der Reihenfolge des contents gibt immer noch das Layout die Reihenfolge im Quelltext vor. Es sei denn, man positioniert exessiv absolute. Das ist mit Flexbox vorbei. Die Hauptinhalte können ganz oben im Quelltext stehen. Ein dreispaltiges Layout mit einem header und main als mittlere Spalte ist zwar fix nachgebaut, aber eben nur mit größerem Aufwand so, dass der Quelltext

<main>
<header>
<nav>
<aside>

heißen kann.

Matthias

[Malcolm Beck´s]

مرحبا

Ich verstehe den ganzen Hype um Flexbox nicht.
Du kannst diesen Artikel lesen und dir für jedes einzelne Beispiel dort die Frage stellen, welchen Aufwand du betreiben müsstest.

Ich verstehe. Danke für den Link.

mfg