Question

我有两个按钮，但它们并排显示。我想让他们在彼此之上。

<div id="top">
    <div>
        <label for="entityDropDown">Entity: </label>
        <select id="entityDropDown"></select>
        <div id="removeEntity"><a>✖</a></div>
    </div>          
    <br><br>
    <div id="entityStatus">
        <div>
            <label for="entityAvailable">Entity Available</label>
            <select id="entityAvailable" multiple=""></select>
        </div>
        <div id="moveButtons">
            <button type="button">Add User</button>
            <button type="button">Remove</button>
        </div>
        <div>
            <label for="entityAssigned">Entity Assigned</label>
            <select id="entityAssigned" multiple=""></select>
        </div>
    </div>
    <br style="clear:both;">
</div>

这是小提琴http://jsfiddle.net/vS9vJ/

Answer 1

简单地：

#moveButtons button {
    display:block;
}

演示： http://jsfiddle.net/vS9vJ/1/

Answer 2

只需将其添加到您的CSS：

#moveButtons button {
    float: left;
    clear: left;
    width: 100%;
}

Answer 3

~~将它们分组到inline-block框中，~~将其display设置为block。在你的JSFiddle中，它们已经在inline-block容器中，因此你不需要再次指定它。

在代码中：

#moveButtons button{
    display: block;
}

然后，您可以使用属性vertical-align垂直对齐方框，例如，尝试：

#entityStatus div {
    vertical-align: middle;
}

实例：http://jsfiddle.net/vS9vJ/3/

将两个div叠加在一起

3 个答案: