如何在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和IE 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>

一个陷阱是，您必须在每个元素之间保留空格。[看小提琴。]

将菜单项设置为inline-block的原因有两个：

1. 如果默认情况下元素是块级项目（例如<li>），则必须将显示设置为inline或inline-block，以保持在同一行中。
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-到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中的调整span为您拥有的编号。

示例：http：//jsfiddle.net/jasongennaro/wvJxD/

您只需要将具有id的div显示#menu为flex容器，如下所示：

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

我已经设法通过以下CSS组合来做到这一点：

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

使所有跨度都使用内联块元素。在包含菜单项的跨度列表下方创建一个宽度为100％的空拉伸跨度。接下来，使包含范围的div成为text-align：对齐的。然后，这将强制内联块元素[您的菜单项]均匀分布。

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>