0

I am trying to align a few buttons in a DIV popup I created. I want the buttons to be next to each other, but I cannot seem to make it work. I tried adding, float: left, but it does not seem to have an effect. Any suggestions? Thanks in advance. 

    <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>

The CSS is as follows: 

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;
}

UPDATE: Keep in mind that the buttons are contained in container "pop_box"...This makes a big difference, because pop_box has position:absolute.

4

3 回答 3

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

于 2013-05-10T21:47:24.237 回答
1

您的 CSS 选择器不正确，应该是div#pop_box而不是 div.pop_box。您的问题中也缺少float:leftfor div.pop_buttons。否则，它应该按您的预期工作。

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

于 2013-05-12T02:48:08.867 回答
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 版本，因为您的原始版本包含大量不相关的属性，这在这种情况下似乎不适用。

于 2013-05-10T21:55:20.460 回答