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

Question

这是我所拥有的：

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: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 3

您需要应用于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 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/