是什么导致这个div的位置发生变化？

Question

jsFiddle

我试图将这4个div放在同一条垂直线上。为什么按钮的存在会改变第一个div的位置？

HTML

<div class="box">
        <button>Y</button> <button>N</button>
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>​

CSS

.box {
    width:200px;
    height:200px;
    padding:10px;
    display:inline-block;
    border:1px solid black;
    text-align:center;
}​

RESULT

Answer 1

将vertical-align:bottom添加到div的样式。

问题的原因是存在任何内容，因为它定义了div的基线。

Answer 2

您可以尝试position:absolute; css代码。

Answer 3

jsFiddle solution

只需更改div的显示属性，它们将垂直对齐：

display: block

编辑：@ben说他想让div垂直对齐。如果必须，请投票给我，但如果他不知道水平和垂直之间的区别，那不是我的错。

Answer 4

像这样调整css

.box {
    width:200px;
    height:200px;
    padding:10px;
    border:1px solid black;
    text-align:center;
}
div.box{display:inline;float:left;}