显示内联块不能使用保证金

Question

为什么这两个元素没有内联？

我希望这两个元素是垂直对齐的

http://jsfiddle.net/3tcsn8z6/

<div class="label">Input label</div>
<div class="input">
    <div></div>
</div>

.label,
.input {
    display:inline-block;
}

.label {
    margin:2px 8px;
    font-size:11px;
}

.input {
    margin:10px 2px;
}

.input > div {
    height:20px;
    width:20px;
    background:red;
}

Answer 1

您可以添加vertical-align: middle。默认值为baseline。保证金有点无关紧要。

Updated Example

.label,
.input {
    display: inline-block;
    vertical-align: middle;
}