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

时间:2013-05-10 21:37:56

标签: html css

我正在尝试在我创建的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。

3 个答案:

答案 0 :(得分:2)

当您将按钮包裹在另一个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

答案 1 :(得分:1)

您可以尝试以下操作(参见演示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版本,因为你原来的版本包含大量不相关的属性,在这种情况下看似不适用。

答案 2 :(得分:1)

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

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