bir div içindeki öğeleri yan yana nasıl eşit olarak dağıtabilirim?

Bu bir menü içindir.
Örneğin, hepsinde biraz margin, max-width ve float (sol veya sağ) bulunan 3 açıklıklı bir div öğem var.
Sol taraftan başlayarak konumlandırılmış ve şöyle gidiyor:
[[span1][span2][span3] - lots of free space here].
Bunu şu şekilde eşitlemek istiyorum: Bunu
[[span1] - space - [span2] - space - [span3]]
CSS kullanarak nasıl yapabilirim? Bunun mümkün olmadığından şüpheliyim.
Bir menü öğesi eklediğimde veya çıkardığımda aynı stili korumasını istediğime dikkat edin.
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;
}

'Eski günlerde' bir tablo kullanırdınız ve menü öğeleriniz, öğe sayısı için genişliğini açıkça belirtmek zorunda kalmadan eşit aralıklarla yerleştirilirdi.

IE 6 ve 7 için değilse (eğer endişeleniyorsanız), o zaman aynısını CSS'de de yapabilirsiniz.

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

Öğe sayısını ayarlamak zorunda kalmadan.

Olmadan örnek table-layout:fixed- hücreler tam genişliğe eşit olarak dağıtılır, ancak genişlikleri içeriklerine göre belirlendiği için eşit boyutta olmaları gerekmez.

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

Örnek table-layout:fixed- hücreler, içeriklerine bakılmaksızın eşit boyuttadır. (Bu ekleme için yorumlarda @DavidHerse'e teşekkürler.)

• http://jsfiddle.net/kqHWM/

İlk ve son menü öğelerinin sola ve sağa yaslanmış olmasını istiyorsanız, aşağıdaki CSS'yi ekleyebilirsiniz:

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

Haklı kullanabilirsiniz.

Bu, diğer yanıtlara benzer, ancak sol ve en sağdaki öğeler eşit aralıklarla yerleştirilmek yerine kenarlarda olacaktır - [a..b..c yerine 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>

Bir şey, her öğe arasında boşluk bırakmanız gerektiğidir. [Kemana bakın.]

Menü öğelerini satır içi blok olarak ayarlamanın iki nedeni vardır:

1. Öğe varsayılan olarak bir blok seviyesi öğesiyse (bir gibi <li>), görüntü aynı satırda kalmak için satır içi veya satır içi blok olarak ayarlanmalıdır.
2. Eleman birden fazla kelimeye ( <span>click here</span>) sahipse , her kelime satır içi olarak ayarlandığında eşit olarak dağıtılacaktır, ancak satır içi bloğa ayarlandığında yalnızca öğeler dağıtılacaktır.

JSFiddle'a bakın

DÜZENLEME:
Artık flexbox geniş bir desteğe sahip olduğuna göre (tümü IE dışı ve IE 10+), "daha iyi bir yol" var.
Yukarıdaki ile aynı eleman yapısını varsayarsak, ihtiyacınız olan tek şey:

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

Dış elemanların da aralıklı olmasını istiyorsanız, sadece boşluk-arasında boşluk-etrafında geçiş yapın.
JSFiddle'a bakın

Birisi biraz farklı bir yaklaşım denemek isterse, FLEX'i kullanabilir.

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

İşte keman: http://jsfiddle.net/ynemh3c2/ ( Div'leri eklemeyi / kaldırmayı da deneyin)

İşte bunu öğrendiğim yer: https://css-tricks.com/snippets/css/a-guide- flexbox /

justify-content: space-betweenve display: flexihtiyacımız olan tek şey bu, ancak ilham için @Pratul'a teşekkürler!

Bunu yapmanın hızlı ve kolay yolu budur

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

Ardından ayarlamak widthait spanSahip sayısı için s.

Örnek: http://jsfiddle.net/jasongennaro/wvJxD/

Sadece id ile div'i #menuesnek kapsayıcı olarak şu şekilde görüntülemeniz gerekir :

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

Bunu aşağıdaki css kombinasyonu ile yapmayı başardım:

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

Satır içi blok öğeleri kullanılan tüm aralıkları yapın. Menü öğelerini içeren aralıklar listesinin altında% 100 genişlikte boş bir uzatma aralığı oluşturun. Ardından, yayılma alanlarını içeren div'i metin hizalı: yaslanmış yapın. Bu daha sonra satır içi blok öğelerini [menü öğeleriniz] eşit olarak dağıtmaya zorlar.

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>