0

我有 2 个 50% 的 div，里面有 2 个按钮。每个按钮都需要左右对齐。问题是，如果我应用浮动，布局会在调整窗口大小时变得疯狂。没有浮动元素可以很好地包裹，但两个按钮都只向左对齐。

这是jsfiddle：http: //jsfiddle.net/dominicm/pcYhL/15/

如何在保持漂亮的调整大小布局的同时将一个按钮左对齐和另一个右对齐？

HTML：

<div class="menu">
<div id="www">
<input class="delAll" type="checkbox"><label class="delLabel" for="del-all">Delete</label>
<input class="pubAll" type="checkbox"><label class="pubLabel" for="pub-all">Publish</label>
<div>
<div id="d">
<input class="delete" type="submit" value="Delete Selected">
<input class="collapse" type="button" value="Collapse All">
</div>
<div id="p">
<input class="expand" name="expand" type="button" value="Expand All">
<input class="update" type="submit" value="Update Selected">
</div>
</div>

CSS：

.menu{
    width:100%;
    height:80px;
    border-radius:7px;
    background-color:#666;
    text-align:center;
}
#www{
    width:100%;
    display:inline-block;
    background-color:yellow;
}
.delAll, .delLabel{

}
.pubAll, .pubLabel{

}

#d{
    width:50%;
    display:inline-block;
    background-color:red;
    min-width:140px;
    text-align:left;
}
#p{
    width:50%;
    display:inline-block;
    background-color:green;
    min-width:140px;
     text-align:right;
}

.delete{
    width:140px;
    margin-right:auto;
}
.update{
    margin:0;
    padding:0;
    width:140px;
}
.collapse{
    width:140px;
    float:right;
}
.expand{
    width:140px;
        float:left;
}
4

0 回答 0