CSS三個內聯元素從左到右排列，如何佔用所有可用寬度

Question

我有一個滑塊，其中一個div包含控件的前一個，開始/停止滑動，下一個。

我將「文本對齊」分別設置爲左側，中間和右側，並顯示爲「內聯」。現在我不知道如何填滿整個寬度。

下面是標記：

<div id="external_promo_controls"> 
    <div id="promo_previous"></div> 
    <div id="promo_auto_controls"></div> 
    <div id="promo_next"></div> 
</div> 

而CSS：

#external_promo_controls div{ 
    display: inline; 
} 
#promo_previous {text-align: left;} 
#promo_auto_controls {text-align: center;} 
#promo_next {text-align: right;} 

我想我可以有它與浮動元素做了，但我挺亂的努力有一個正確的組合元素在一條線上並且將元素居中在中間。我想避免使用像素值定位元素，因爲只要我更改文本，字體或大小或容器（這些都是最終會發生的事件），它就會中斷。

Answer 1

簡單易用的花車 - 這個小提琴應該設置你在正確的道路上：

http://jsfiddle.net/Q4paq/

新的例子與資料覈實方含具有懸停狀態的鏈接。

http://jsfiddle.net/Q4paq/1/

Answer 2

試試這個。我不知道它會工作或沒有，但假設所有三個內部的div擁有的每個100px寬度則

outerDiv指定寬度爲300像素，沒有margin和padding

innerDiv寬度：100像素和margin和padding都0px和float：left。

如果你想指定margin和padding，那麼所有三個innerDiv的width + padding + margin + border * 3的總和應該是外部div的寬度。