Wie verteile ich Elemente in einem Div gleichmäßig nebeneinander?

Dies ist für ein Menü gedacht.
Zum Beispiel habe ich ein div-Element mit 3 Bereichen, die alle einen gewissen Rand, eine maximale Breite und einen Gleitkommawert haben (links oder rechts).
Es wird von links positioniert und sieht folgendermaßen
[[span1][span2][span3] - lots of free space here].
aus : Ich möchte es wie folgt ausgleichen :
[[span1] - space - [span2] - space - [span3]]
Wie kann ich dies mit CSS tun? Ich bezweifle, dass es nicht möglich ist.
Beachten Sie, dass der Stil beim Hinzufügen oder Entfernen eines Menüelements beibehalten werden soll.
HTML:

<div id="menu">
    <span class="menuitem"></span>
    <span class="menuitem"></span>
    <span class="menuitem"></span>
</div>

CSS:

#menu {
    ...
    width:800px;
}
.menuitem {
    display:block;
    float:left;
    margin-left:25px;
    position:relative;
    min-height:35px;
    max-width:125px;
    padding-bottom:10px;
    text-align:center;
}

Früher verwendeten Sie eine Tabelle, und Ihre Menüelemente waren gleichmäßig verteilt, ohne dass die Breite für die Anzahl der Elemente explizit angegeben werden musste.

Wenn es nicht für IE 6 und 7 war (wenn das von Belang ist), können Sie dasselbe in CSS tun.

<div class="demo">
    <span>Span 1</span>
    <span>Span 2</span>
    <span>Span 3</span>
</div>

CSS:

div.demo {
    display: table;
    width: 100%;
    table-layout: fixed;    /* For cells of equal size */
}
div.demo span {
    display: table-cell;
    text-align: center;
}

Ohne die Anzahl der Artikel anpassen zu müssen.

Beispiel ohne table-layout:fixed- die Zellen sind gleichmäßig über die gesamte Breite verteilt, aber nicht unbedingt gleich groß, da ihre Breite durch ihren Inhalt bestimmt wird.

• http://jsfiddle.net/w3dx/ULQwf/

Beispiel mit table-layout:fixed- Die Zellen sind unabhängig von ihrem Inhalt gleich groß. (Danke an @DavidHerse in den Kommentaren für diesen Zusatz.)

• http://jsfiddle.net/kqHWM/

Wenn Sie möchten, dass das erste und das letzte Menüelement links und rechts ausgerichtet sind, können Sie das folgende CSS hinzufügen:

div.demo span:first-child {
    text-align: left;
}
div.demo span:last-child {
    text-align: right;
}

Sie können begründen verwenden.

Dies ist ähnlich wie bei den anderen Antworten, außer dass sich die Elemente ganz links und ganz rechts an den Rändern befinden, anstatt gleich weit voneinander entfernt zu sein - [a ... b ... c statt .a..b..c.]

<div class="menu">
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

<style>
.menu {text-align:justify;}
.menu:after { content:' '; display:inline-block; width: 100%; height: 0 }
.menu > span {display:inline-block} 
</style>

Ein Problem ist, dass Sie zwischen jedem Element Leerzeichen lassen müssen. [Siehe die Geige.]

Es gibt zwei Gründe, die Menüelemente auf Inline-Block zu setzen:

1. Wenn das Element standardmäßig ein Element auf Blockebene ist (z. B. ein Element <li>), muss die Anzeige auf Inline oder Inline-Block eingestellt werden, um in derselben Zeile zu bleiben.
2. Wenn das Element mehr als ein Wort ( <span>click here</span>) hat, wird jedes Wort gleichmäßig verteilt, wenn es auf Inline gesetzt ist, aber nur die Elemente werden verteilt, wenn es auf Inline-Block gesetzt ist.

Siehe die JSFiddle

BEARBEITEN :
Jetzt, da Flexbox breite Unterstützung bietet (alle Nicht-IE und IE 10+), gibt es einen "besseren Weg".
Unter der Annahme der gleichen Elementstruktur wie oben benötigen Sie lediglich:

<style>
    .menu { display: flex; justify-content: space-between; }
</style>

Wenn Sie möchten, dass auch die äußeren Elemente voneinander beabstandet sind, wechseln Sie einfach zwischen Leerzeichen und Leerzeichen.
Siehe die JSFiddle

Wenn jemand einen etwas anderen Ansatz ausprobieren möchte, kann er FLEX verwenden.

HTML

<div class="test">
    <div>Div 1</div>
    <div>Div 2</div>
    <div>Div 3</div>
    <div>Div 4</div>
</div>

CSS

.test {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}
.test > div {
    margin-top: 10px;
    padding: 20px;
    background-color: #FF0000;
}

Hier ist die Geige: http://jsfiddle.net/ynemh3c2/ (Versuchen Sie auch, Divs hinzuzufügen / zu entfernen)

Hier habe ich davon erfahren: https://css-tricks.com/snippets/css/a-guide- zu-flexbox /

justify-content: space-betweenund display: flexist alles was wir brauchten, aber danke an @Pratul für die Inspiration!

Dies ist der schnelle und einfache Weg, dies zu tun

<div>
    <span>Span 1</span>
    <span>Span 2</span>
    <span>Span 3</span>
</div>

CSS

div{
    width:100%;
}
span{
    display:inline-block;    
    width:33%;
    text-align:center;
}

Dann passen die widthder spans für die Zahl , die Sie haben.

Beispiel: http://jsfiddle.net/jasongennaro/wvJxD/

Ich habe es mit der folgenden CSS-Kombination geschafft:

text-align: justify;
text-align-last: justify;
text-justify: inter-word;

Sie müssen nur das div mit id #menuals flexiblen Container wie folgt anzeigen :

#menu{
    width: 800px;
    display: flex;
    justify-content: space-between;
}

Machen Sie alle Bereiche zu Inline-Block-Elementen. Erstellen Sie eine leere Streckenspanne mit einer Breite von 100% unter der Liste der Bereiche, die die Menüelemente enthalten. Als nächstes machen Sie das Div, das die Bereiche enthält, textausgerichtet: gerechtfertigt. Dies würde dann die Inline-Block-Elemente [Ihre Menüelemente] zwingen, gleichmäßig zu verteilen.

https://jsfiddle.net/freedawirl/bh0eadzz/3/

  <div id="container">

          <div class="social">
            <a href="#" target="_blank" aria-label="facebook-link">
            <img src="http://placehold.it/40x40">
            </a>
            <a href="#" target="_blank" aria-label="twitter-link">
                <img src="http://placehold.it/40x40">
            </a>
            <a href="#" target="_blank" aria-label="youtube-link">
                <img src="http://placehold.it/40x40">
            </a>
            <a href="#" target="_blank" aria-label="pinterest-link">
                 <img src="http://placehold.it/40x40">
            </a>
            <a href="#" target="_blank" aria-label="snapchat-link">
                <img src="http://placehold.it/40x40">
            </a>
            <a href="#" target="_blank" aria-label="blog-link">
                 <img src="http://placehold.it/40x40">
            </a>

            <a href="#" aria-label="phone-link">
                 <img src="http://placehold.it/40x40">
            </a>
            <span class="stretch"></span>
          </div>
             </div>