How to align a button over top of a text input? [duplicate] - html

Question

This question already has answers here:
How do I add a "search" button in a text input field?
(7 answers)
Closed 9 years ago.
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;
}
But it comes out like this:
I don't know where the gap is coming from; why isn't the text input snug against its container div like the blue button is?

Answer 1

Try setting the vertical-align:top to 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 2

Try this to add vertical-align: middle; to .combobox .dropdown_btn and remove it from the combobox class:
.combobox .dropdown_btn {
width: 18px;
height: 20px;
margin-left: -20px;
display: inline-block;
cursor: pointer;
background-color: blue;
vertical-align: middle;
}

Answer 3

You need to apply vertical-align: middle to your inline elements:
.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;
}
See: JSFiddle
The vertical-align property is not inherited, so you need to specify it to any inline elements that you want to adjust.

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/