Question

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

    <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的位置为：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

Answer 2

您可以尝试以下操作（参见演示：http://jsfiddle.net/Z9vCb/）：

<强> HTML

<div id="pop_box">Hello there Sir!
     <br/>
    <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 {
position:absolute;
z-index:3;
background-color:#434343;
border-color:#808080;
border-style:solid;
padding: 10px 10px 10px 10px;
}

div.pop_buttons {
float:left;
position:relative;
margin-right: 10px;
width: 100px;
height: 20px;
line-height:20px;
text-align:center;
font-family: 'Segoe UI', Arial;
font-size: 12px;
background-color:#808080;
}

注意：这是一个“清理过的”CSS版本，因为你原来的版本包含大量不相关的属性，在这种情况下看似不适用。

Answer 3

您的CSS选择器不正确，应为div#pop_box且不 div.pop_box。您在问题中也遗漏了float:left的{{1}}。否则，它应该按预期工作。

float在绝对对齐的容器中彼此相邻

3 个答案:

演示：http://jsbin.com/ulukid