css: 100% Breite durch Anzahl der Listenelemente teilen

nierewa · 8. Februar 2021

Hallo,

ich habe das Standard Joomla Module als horizontale nav-Bar im Einsatz.
Sprich alle Menüpunkte stehen nebeneinander. (Die umgebende ul hat ein display:flex;)

Die Breite der einzelnen Listenpunkte gebe ich je nach anzahl der Menüpunkte so an, Beispiel bei 5 Elementen: width:calc(100% / 5)

Wenn jetzt ein Menüpunkt dazu kommt, oder einer wegfällt, müßte ich ja immer das CSS anpassen.

Weiß jemand einen Weg wie man das per css lösen kann?
Gibt es eine Art Zählervariable? Also so etwa: width:calc(100% / anzahl)

Danke

LukasHH · 8. Februar 2021

Ich würde das nicht mit calc machen. Hier habe ich einen anderen Ansatz in Bezug auf flex:
https://jsfiddle.net/LukasHH/w3bauLsm/

CSS

ul{
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}

li{
width: 100%;
background: #efefef;
margin: 2px;
text-align: center;
}

Alles anzeigen

nierewa · 8. Februar 2021

Hallo LukasHH,

danke für die Lösung. So funktioniert es.

... und jetzt noch als erledigt markieren...