как равномерно распределить элементы в 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. Если элемент по умолчанию является элементом уровня блока (например, <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/ (Попробуйте также добавить / удалить div)

Вот где я узнал об этом: 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;

Сделайте все пролеты используемыми inline-block элементами. Создайте пустой участок растяжения шириной 100% под списком участков, содержащих элементы меню. Затем создайте div, содержащий промежутки text-align: justified. Затем это заставит элементы встроенного блока [ваши пункты меню] равномерно распределиться.

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>