Inline-Elemente horizontal gleichmäßig verteilen

[Crackp0t]

Hallo ich möchte Folgendes in CSS und HTML machen und komme nicht weiter:

Als Gerüst habe ich:

<div id="header">
        <span id="point-one" class="header-item">Punkt1</span>
        <span id="point-two" class="header-item">Punkt2</span>
        <span id="point-three" class="header-item">Punkt3</span>
        <span id="point-four" class="header-item">Punkt4</span>
        <span id="point-five" class="header-item">Punkt5</span>
</div>

Die Elemente "header-item" im Container "header" (der eine feste Größe hat) möchte ich nun gleichmäßig in der Horizontale verteilen, unabhängig davon ob sich nun 3, 4 oder 5 Elemente mit der Klasse xxx darin befinden, da die Anzahl und der Text durch JS verändert wird.
Mein jetziger Anlauf sieht so aus:

.header-item {
    font-size: 1.4em;
    color: rgb(240,240,240);
    font-family: Arial;
    text-align: center;
    
    min-width: 10%;
    max-width: 25%;
    float: left;
    padding: 15px 0px;
}

Jedoch wird nur min-width verwendet, egal wie viele Elemente vorhanden sind.
Ist das mit css machbar oder muss ich da mit JS nachhelfen und die prozentuale Breite der Elemente anpassen?

 

[TheTalesOfImmo]

AW: Inline-Elemente horizontal gleichmäßig verteilen

Hi!

Um inline-Elementen Höhe und Breite zuweisen zu können, musst Du den Anzeigetyp anpassen, probier mal in der Klasse header-item folgendes hinzuzufügen:

display:inline-block;

 

[jackprince]

AW: Inline-Elemente horizontal gleichmäßig verteilen

Da die Elemente sowieso gefloatet werden würde ich sicherheitshalber auf "display: block;" gehen.
Wie auf CSS2 - The display declaration zu sehen nimmt der IE 'inline-block' z.B. erst seit V8.

Um also aus den Beschränkungen für "inline" Objekte heraus zu kommen lieber block nehmen.
Wie gesagt gefloatet wird ja sowieso.