如何在文本输入的顶部对齐按钮？

Question

Here's what I've got：

HTML

<div class="combobox">
    <input type="text" value="" name="brand" class="text" id="brand"><span class="dropdown_btn"></span>
</div>

CSS

.combobox {
    margin: 0;
    padding: 0;
    vertical-align: middle;
}
.combobox input {
    height: 20px;
    line-height: 20px;
    margin: 0;
    padding: 0;
}
.combobox .dropdown_btn {
    width: 18px;
    height: 20px;
    margin-left: -20px;
    display: inline-block;
    cursor: pointer;
    background-color: blue;
}

但它是这样的：

我不知道差距来自哪里;为什么文本输入不像蓝色按钮那样紧贴其容器div？

Answer 1

尝试将vertical-align: middle;添加到.combobox .dropdown_btn并将其从combobox类中删除：

.combobox .dropdown_btn {
    width: 18px;
    height: 20px;
    margin-left: -20px;
    display: inline-block;
    cursor: pointer;
    background-color: blue;
    vertical-align: middle;
}

Answer 2

您需要将vertical-align: middle应用于内联元素：

.combobox {
    margin: 0;
    padding: 0;
}

.combobox input {
    height: 20px;
    line-height: 20px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

.combobox .dropdown_btn {
    width: 18px;
    height: 20px;
    margin-left: -20px;
    display: inline-block;
    cursor: pointer;
    background-color: blue;
    vertical-align: middle;
}

请参阅：JSFiddle

vertical-align属性不会被继承，因此您需要将其指定给要调整的任何内联元素。

Answer 3

尝试将vertical-align:top设置为input

http://jsfiddle.net/KDN8s/4/

.combobox {
    margin: 0;
    padding: 0;
}

.combobox input {
    margin: 0;
    padding: 0;
    height: 20px;
    vertical-align: top;
}

.combobox .dropdown_btn {
    width: 20px;
    height: 24px;
    margin-left: -20px;
    display: inline-block;
    cursor: pointer;
    background-color: blue;
}

<div class="combobox"><input type="text" value="" name="brand" class="text" id="brand"><span class="dropdown_btn"></span></div>

Answer 4

.combobox .dropdown_btn {
    width: 18px;
    height: 20px;
    margin-left: -20px;
    display: inline-block;
    cursor: pointer;
    background-color: blue;
    vertical-align: middle;
}

http://jsfiddle.net/KDN8s/5/