如何在文本输入顶部对齐按钮？ [复制]答案

【问题标题】：How to align a button over top of a text input? [duplicate]如何在文本输入顶部对齐按钮？ [复制]
【发布时间】：2013-09-08 22:53:34
【问题描述】：

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？

【问题讨论】：

标签： html css

【解决方案1】：

尝试将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>

【讨论】：

【解决方案2】：

尝试将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;
}

【讨论】：

【解决方案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 属性未继承，因此您需要将其指定给要调整的任何内联元素。

【讨论】：

@JoshC fujy 也一样！！！
顺便说一下你不需要添加vertical-align到.combobox input
@fujy 不完全是。将vertical-align: baseline 设置为.combobox input，您会看到蓝色图案在垂直方向上略有移动。见：jsfiddle.net/audetwebdesign/8GpxP/1

【解决方案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/

【讨论】：

这在您提供的示例中甚至都行不通。
为什么要清除浮动？您还需要将vertical-align: middle 应用于输入字段，因为默认情况下该字段与基线对齐。