Position Button

[Gunnar Bittersmann]

@@marctrix

Ich setze die gerne hin und wieder ein. Soll ein horizontales Menü einen vorgegebenen Bereich (Elternelement) ausfüllen, bei dem die Buttons in Relation zur Beschriftungslänge stehen,

Warum sollte man das wollen? Warum sollte bei kurzem Text weniger Leerraum dazukommen als bei langem? Das sieht richtig ████ blöd aus: Pen 1

geht nichts schneller als:

ul {
	display: table;
	width: 100%;
}
li {
	display: table-cell;
}

Stimmt nicht. Das geht mindestens genauso schnell:

ul
{
	display: flex;
	justify-content: space-between;
	list-style: none;
	padding: 0;
}

und sieht auch nach was aus: Pen 2

Das benötigt wesentlich weniger Platz als ein Menü mit gleich breiten Buttons, die sich natürlich nach dem längsten "richten" müssen. Für Bildschirme, die trotzdem nicht breit genug sind, kann man - gerade weil es CSS-Tabellen sind - ja dann eine andere Darstellungsform wählen

Denkfehler. Man weiß nicht, was „breit genug“ wäre. Man kann einen Breakpoint finden, der für manche Geräte passt, für andere aber zu groß gewählt ist, für wieder andere zu klein. Weil man eben nicht wissen kann, wieviel Platz die längste Beschriftung denn nun genau braucht.

(muss man aber egal mit welcher Technik man die Liste horizontal anordnet)...

Auch das stimmt nicht.

Bei Flexbox muss man keine andere Darstellungsform wählen. Die Mehrzeiligkeit erreicht man ganz einfach per flex-wrap: wrap oder flex-flow: row wrap (in Pen 2 bereits drin).

LLAP 🖖