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

概述参见英文答案 > How do I add a “search” button in a text input field?                                    7个 Here’s what I’ve got： HTML <div class="combobox"> <input type="text" value="" name="brand" clas 参见英文答案 > How do I add a “search” button in a text input field?                                    7个
Here’s what I’ve got：

HTML

<div >    <input type="text" value="" name="brand"  ID="brand"><span ></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？

解决方法 尝试将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 ><input type="text" value="" name="brand"  ID="brand"><span ></span></div>

总结

以上是内存溢出为你收集整理的html – 如何在文本输入的顶部对齐按钮？全部内容，希望文章能够帮你解决html – 如何在文本输入的顶部对齐按钮？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。