input and button side by side
input
and button
elements are inline elements, as such by separating them by a newline in your code, this is effectively interpreted and rendered as a whitespace character, leading to a gap appearing between them.
To solve this, add:
input, button{
margin:0;
}
Then remove the new line from between the elements in your HTML:
Demo Fiddle
<body>
<div id="main_search">
<input id="main_search_input" type="text" placeholder="Suchen" /><button id="search_button">
<img src="https://cdn1.iconfinder.com/data/icons/TWG_Retina_Icons/24/magnifier.png" width="20" style="border-left: 1px solid #D7D7D7; padding: 0 0 0 5px;" />
</button>
</div>
</body>
Alternatives
(also requiring setting no margins, per above)
Float the two elements so they push up against one another
Apply a font-size:0
to #main_search
so the space has a width of zero
Admin
Updated on June 04, 2022Comments
-
Admin almost 2 years
Im working on a header for a website and i have a problem with search option.
I have include aninput
and abutton
tag.
Thoose have to have avertical-align: middle;
and should be side by side.I've try something but it doesn't work. Can somebody explain why and how i fix that?
HTML:
<div id="main_search"> <input id="main_search_input" type="text" placeholder="Suchen" /> <button id="search_button"><img src="search.png" width="20" style="border-left: 1px solid #D7D7D7; padding: 0 0 0 5px;" alt="" title="" /></button> </div>
CSS:
#main_search { float: right; line-height: 60px; margin: 0 50px 0 0; } #main_search_input { border-top-left-radius: 5px; border-bottom-left-radius: 5px; height: 20px; line-height: 20px; width: 200px; vertical-align: middle; padding: 5px 10px 5px 10px !important; } #search_button { background-color: #FFF; border-top-right-radius: 5px; border-bottom-right-radius: 5px; height: 30px; padding: 5px; vertical-align: middle; }