如何在一個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>