Horizontales Menü

[heinetz]

Hallo Forum,

ich habe nun etwas mit der Umsetzung meines Layouts weitergemacht. Nun versuche ich eine Liste mit icons horizontal darzustellen ... was grundsätzlich gelingt aber eben doch nicht ganz sauber.

Codepen

1. • Die Liste ist zentriert im Container
2. • Die Listenelemente sind linksbündig in der Liste selbst (sieht man wenn die Liste umbricht )
3. • Die Listenelemente haben einen Abstand zueinander. Allerdings soll das erste Listenelement keinen Abstand nach links und das letzte keine nach rechts haben.
4. • Unterhalb der Liste sind ein paar Pixel Abstand zum Container
5. • Die Bilder in den Listenelementen erzeugen ein paar Pixel Abstand zum Rand des Listenelements.

zu 1.) ... verhält sich wie gewünscht.

zu 2.) ... verhält sich wie gewünscht.

zu 3.) das könnte ich mit negativem margin für die Liste lösen oder indem ich Ausnahmen für die beiden (Pseudo-) Listenelemente definiere. Ersteres ist sicher eleganter.

zu 4.) Den erzeugt Liste, weil ich sie zum Inline-Element gemacht habe, um sie zu zentrieren. Mache ich daraus eine Tabelle (display:table), ist der Abstand passé. Allerdings ist sie dann nicht mehr zentriert, was man mit margin:auto lösen könnte, aber das steht im Widerspruch zur Lösung unter 3.

zu 5.) Das kriege ich in den Griff, wenn ich auf die images ein display:block anwende.

Wie Ihr ja lesen könnt, habe für sämtliche der Probleme irgendwelche Lösungen. Die Frage ist aber, ob es nicht eleganter geht.

Hat jemand bessere Lösungen?

gruss, heinetz