як рівномірно розподілити елементи в div поруч один з одним?

Це призначено для меню.
Наприклад, у мене є елемент div з 3 прольотами, у кожному з яких є деяке поле, максимальна ширина та плаваюча (ліва чи права).
Він розташовується, починаючи з лівого боку, і виглядає так:
[[span1][span2][span3] - lots of free space here].
я хочу вирівняти його так:
[[span1] - space - [span2] - space - [span3]]
Як я можу це зробити за допомогою CSS? Я сумніваюся, що це неможливо.
Зауважте, що я хочу, щоб він зберігав незмінний стиль, коли додаю або видаляю пункт меню.
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;
}

За "старих часів" ви використовували таблицю, і пункти вашого меню мали б бути рівномірно розташовані без необхідності чітко вказувати ширину для кількості елементів.

Якби не IE 6 і 7 (якщо це викликає занепокоєння), ви можете зробити те ж саме в 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;
}

Без необхідності регулювати кількість елементів.

Приклад без table-layout:fixed- клітини рівномірно розподілені по всій ширині, але вони не обов'язково однакового розміру, оскільки їх ширина визначається їх вмістом.

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

Приклад з table-layout:fixed- клітини мають однаковий розмір, незалежно від їх вмісту. (Дякую @DavidHerse у коментарях до цього доповнення.)

• http://jsfiddle.net/kqHWM/

Якщо ви хочете, щоб перший та останній елементи меню були вирівняні зліва та праворуч, тоді ви можете додати наступний CSS:

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

Ви можете використовувати виправдання.

Це схоже на інші відповіді, за винятком того, що лівий та крайній елементи будуть розташовані по краях, замість того, щоб мати однаковий інтервал - [a ... b ... c замість .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>

Однією з проблем є те, що між кожним елементом потрібно залишати пробіли. [Див. Скрипку.]

Є дві причини, щоб встановити пункти меню для вбудованого блокування:

1. Якщо елемент за замовчуванням є елементом рівня блоку (наприклад, an <li>), дисплей повинен бути встановлений на вбудований або вбудований блок, щоб залишатися в тому самому рядку.
2. Якщо елемент має більше одного слова ( <span>click here</span>), кожне слово буде розподілено рівномірно, якщо встановлено вбудований, але лише елементи будуть розподілені, якщо встановлено вбудований блок.

Див. JSFiddle

РЕДАГУВАТИ:
Тепер, коли flexbox має широку підтримку (усі, що не належать до IE, і IE 10+), існує "кращий спосіб".
Припускаючи ту саму структуру елементів, що і вище, все, що вам потрібно, це:

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

Якщо ви хочете, щоб зовнішні елементи також були розташовані на просторі, просто переключіть пробіл між пробілами.
Див. JSFiddle

Якщо хтось хоче спробувати трохи інший підхід, він може скористатися 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;
}

Ось скрипка: http://jsfiddle.net/ynemh3c2/ (Спробуйте також додати / видалити divs)

Ось де я дізнався про це: https://css-tricks.com/snippets/css/a-guide- to-flexbox /

justify-content: space-betweenі display: flexце все, що нам потрібно, але дякую @Pratul за натхнення!

Це швидкий і простий спосіб зробити це

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

Потім відрегулюйте widthз spanS для числа у вас є.

Приклад: http://jsfiddle.net/jasongennaro/wvJxD/

Вам просто потрібно відобразити div з ідентифікатором #menuяк гнучкий контейнер, як це:

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

Мені вдалося це зробити за допомогою наступної комбінації css:

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

Зробити всі прольоти використаними елементами вбудованого блоку. Створіть порожній діапазон розтяжки зі 100% шириною під списком проміжків, що містять пункти меню. Далі зробіть div, що містить прольоти, вирівнювання тексту: вирівняно. Потім це змусить елементи вбудованого блоку [елементи вашого меню] рівномірно розподілити.

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>