如何在一个div中均匀分布元素？

Question

这是为了一个菜单。
例如我有一个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; 
} 

Answer 1

这是快速简便的方法来做到这一点

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

然后调整您所拥有的电话号码为span的。

例子：http://jsfiddle.net/jasongennaro/wvJxD/

Answer 2

在“过去”你会使用一个表，你的菜单项目将无需显式声明的项目数的宽度均匀地间隔开。

如果不是针对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; 
} 

Answer 3

您可以使用justify。

这与其他答案类似，除了左边和右边的元素将位于边缘而不是等间距 - [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>），则将每个单词设置为内联时将均匀分配，但只有在设置为内联块时才会分配元素。

See the JSFiddle

编辑：
现在flexbox具有广泛的支持（所有非IE和IE 10+），有一个 “更好的方式”。
假设与上述相同的元件结构中，所有需要的是：

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

如果希望外元素被以及间隔开，只要切换空间之间的空间周围。
See the JSFiddle

Answer 4

如果有人想尝试稍微不同的方法，他们可以使用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/

Answer 5

justify-content: space-between和display: flex是我们所需要的，但感谢@Pratul的灵感！

Answer 6

使所有跨度使用内嵌块元素。在包含菜单项的跨度列表下方创建一个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>