CSS:所有 sub-div 元素与 centerder 第二个元素在同一行

Question

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

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

Answer 1

对所有子元素使用 display: inline-block 并将 white-space: nowrap; 属性设置为父 div。

例子-

HTML:

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

方法一(无 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

方法二( 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