如何将按钮对齐在文本输入框的上方？

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不像蓝色按钮一样紧密相连？

- mpen

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;
}

- fujy

Answer 2

尝试将input的vertical-align属性设置为top。 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>

- beautifulcoder

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 属性不会被继承，因此您需要为任何想要调整的行内元素指定它。

- Marc Audet

---

@JoshC，fujy也这样做了!!! - Marc Audet

顺便说一下，您不需要将vertical-align添加到.combobox input。 - fujy

@fujy 不完全正确。将 vertical-align: baseline 设置为 .combobox input，您会看到蓝色图案在垂直方向上略微移动。请参见：http://jsfiddle.net/audetwebdesign/8GpxP/1/ - Marc Audet

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/

- Mahmoud Samy

---

你提供的例子中甚至都不能正常工作。 - Josh Crozier

你为什么清除浮动？你还需要将 vertical-align: middle 应用到输入框上，因为默认情况下它与基线对齐。 - Marc Audet