html - 在绝对对齐的容器中将 div 并排 float

Question

我试图在我创建的 DIV 弹出窗口中对齐几个按钮。我希望按钮彼此相邻，但我似乎无法使其工作。我尝试添加，float: left，但似乎没有效果。有什么建议么？提前致谢。

    <div id="pop_box">Hello there sir!
    <div class="pop_buttons">Update Quantity</div> 
    <div class="pop_buttons">Check Out</div> 
    <div class="pop_buttons">Close Cart</div>
    </div>

CSS如下:

div.pop_box
{
z-index:3;
width:70%;
height:70%;
bottom:20%;
right:15%;
overflow:auto;
background-color:#434343;
position:absolute;
border-color:#808080;
border-style:solid;
border-collapse:collapse;
border-width:1px;
padding: 10px 10px 10px 10px;
}

div.pop_buttons 
{
z-index: 4;
margin: 10px;
width: 100px;
height: 20px;
line-height:20px;
text-align:center;
bottom: 30%;
right: 30%;
font-family: 'Segoe UI', Arial;
font-size: 12px;
vertical-align:middle;
background-color:#808080;
}

更新:请记住，按钮包含在容器“pop_box”中...这有很大的不同，因为 pop_box 具有 position:absolute。

Answer 1

当您将按钮包裹在另一个 div 中并将 float: left 添加到 pop_buttons 时，您可以将它们很好地排列起来

<div id="pop_box">Hello there sir!
    <div>
        <div class="pop_buttons">Update Quantity</div>
        <div class="pop_buttons">Check Out</div>
        <div class="pop_buttons">Close Cart</div>
    </div>
</div>

CSS:

div.pop_buttons {
    z-index: 4;
    margin: 10px;
    width: 100px;
    height: 20px;
    line-height:20px;
    text-align:center;
    bottom: 30%;
    right: 30%;
    font-family:'Segoe UI', Arial;
    font-size: 12px;
    vertical-align:middle;
    background-color:#808080;
    float: left;
}

JSFiddle