CSS:一行中的所有子 div 元素与居中的第二个元素

Question

我试图在一行中对齐 3 个 sub-div 元素，第一个元素左浮动，第三个 - 右和第二个 - 居中。
在我的草稿下面。我错过了什么？
http://jsfiddle.net/yDzL9/

在我真正的电子商店中，问题在于对齐包含 input (button) 的第二个 div ，但在 jsfiddle 的示例中，第三个 div 的问题。

Answer 1

使用显示:inline-block对于所有子元素并设置 white-space: nowrap;属性到父 div。

例子-

HTML:

<div id="container">
    <div class="wishlist">
    </div>
        <div class="cart">
    </div>
        <div class="compare">
    </div>    
</div>

方法 1(无 float div):

CSS:

#container {
    height:26px;
    width:300px;
    background-color:#009900; 
    white-space: nowrap;
}


#container div{
    display: inline-block;
    width:100px;
    height:26px;
}

Working Example

方法 2(带 float div)

CSS:

#container {
    height:26px;
    width:300px;
    background-color:#009900; 
    white-space: nowrap;
    text-align: center;
}

#container div{
    display: inline-block;
    width:50px;
    height:26px;
}

.wishlist{
    background-color:blue; 
    float: left;
}

.cart{
    background-color:black; 
}

.compare{
    background-color:red; 
    float: right;
}

Working Example