jak równomiernie rozmieścić elementy w div obok siebie?

To jest przeznaczone do menu.
Na przykład mam element div z 3 rozpiętościami, z których wszystkie mają margines, maksymalną szerokość i zmiennoprzecinkowe (lewe lub prawe).
Jest ustawiony zaczynając od lewej strony i wygląda tak:
[[span1][span2][span3] - lots of free space here].
Chcę wyrównać to w następujący
[[span1] - space - [span2] - space - [span3]]
sposób : Jak mogę to zrobić za pomocą CSS? Trochę wątpię, że to niemożliwe.
Zwróć uwagę, że chcę, aby zachowywał ten sam styl podczas dodawania lub usuwania pozycji menu.
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;
}

W „dawnych czasach” używałbyś tabeli, a pozycje menu byłyby równomiernie rozmieszczone bez konieczności jawnego określania szerokości dla liczby pozycji.

Gdyby nie IE 6 i 7 (jeśli to dotyczy), możesz zrobić to samo w CSS.

<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;
}

Bez konieczności dostosowywania się do liczby przedmiotów.

Przykład bez table-layout:fixed- komórki są równomiernie rozmieszczone na całej szerokości, ale niekoniecznie mają taki sam rozmiar, ponieważ ich szerokość jest określana przez zawartość.

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

Przykład z table-layout:fixed- komórki mają ten sam rozmiar, niezależnie od ich zawartości. (Podziękowania dla @DavidHerse w komentarzach za ten dodatek).

• http://jsfiddle.net/kqHWM/

Jeśli chcesz, aby pierwszy i ostatni element menu był wyrównany do lewej i prawej strony, możesz dodać następujący arkusz CSS:

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

Możesz użyć uzasadnienia.

Jest to podobne do innych odpowiedzi, z tą różnicą, że lewy i skrajny prawy element będą na krawędziach, a nie w równych odstępach - [a ... b ... c zamiast .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>

Jedna trudność polega na tym, że musisz zostawić spacje między każdym elementem. [Zobacz skrzypce].

Istnieją dwa powody, dla których warto ustawić pozycje menu na blokowanie inline:

1. Jeśli element jest domyślnie elementem na poziomie bloku (takim jak a <li>), wyświetlanie musi być ustawione na inline lub inline-block, aby pozostać w tym samym wierszu.
2. Jeśli element ma więcej niż jedno słowo ( <span>click here</span>), każde słowo zostanie rozdzielone równomiernie, gdy zostanie ustawione na inline, ale tylko elementy zostaną rozłożone, gdy zostanie ustawione na inline-block.

Zobacz JSFiddle

EDYCJA:
Teraz, gdy flexbox ma szerokie wsparcie (wszystkie nie-IE i IE 10+), jest „lepszy sposób”.
Zakładając taką samą strukturę elementów jak powyżej, wystarczy:

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

Jeśli chcesz, aby elementy zewnętrzne również były rozmieszczone, po prostu zmień spację między na przestrzeń wokół.
Zobacz JSFiddle

Jeśli ktoś chce spróbować nieco innego podejścia, może skorzystać z FLEX.

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;
}

Oto skrzypce: http://jsfiddle.net/ynemh3c2/ (Spróbuj również dodać / usunąć elementy div)

Tutaj dowiedziałem się o tym: https://css-tricks.com/snippets/css/a-guide- do-flexbox /

justify-content: space-betweeni display: flexto wszystko, czego potrzebowaliśmy, ale dzięki @Pratul za inspirację!

To szybki i łatwy sposób na zrobienie tego

<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;
}

Następnie dostosuj widthzspan s do liczby masz.

Przykład: http://jsfiddle.net/jasongennaro/wvJxD/

Wystarczy wyświetlić div z id #menujako kontener elastyczny w następujący sposób:

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

Udało mi się to zrobić z następującą kombinacją CSS:

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

Wykonaj wszystkie rozpiętości używane w elementach blokowych. Utwórz pusty zakres rozciągania o szerokości 100% poniżej listy rozpiętości zawierającej elementy menu. Następnie ustaw element div zawierający spansy na tekst: wyjustowany. To zmusiłoby elementy inline-block [elementy menu] do równomiernego rozmieszczenia.

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>