Enter error equalization button

Question

I tried to align the submit button and the search input, but I am not working, and I do not understand why. I have this style code:

input[type=search] border: none cursor: text padding: 0 border: 1px solid #cfcfcf .search-main input, .search-main button height: 30px display: inline-block .search-main button background: #55e0a8 border: none width: 18% margin-left: -7px display:inline-block .search-main input width: 80% 

and this html:

 <form method="get" class="search-main"> <input name="q" type="search"> <button type="submit"></button> </form> 

and here is what I get:

Here is the online version

So, a rather stupid question, but since I tried for more than 40 minutes, I thought that I would try to publish it here. I played with firebug, padding, marginins, and I don't understand where this problem came from.

Answer 1

You can try -

 .search-main > button { float: right; } 

Answer 2

Add vertical-align: middle to your inline-block elements:

 .search-main input, .search-main button { height: 29px; display: inline-block; vertical-align: middle; } 

Answer 3

Problems arise when you use height for inline elements.

You can simply remove the height and replace with padding with both elements:

 .search-main input, .search-main button { padding: 10px 0; display: inline-block; } .search-main button { background: #55e0a8 border: none width: 18% margin-left: -7px display:inline-block padding: 11px 0; // +1px for border on the input } 

Answer 4

It was easy, hope the following code is enough for what you need.

 .search-main button { background: #55e0a8; border: none; width: 18%; margin-left: -7px; display: inline-block; //additional code float: left; //additional code vertical-align: middle; //additional code height: 32px; //additional code } 

and this is for input:

 <input name="q" type="search" style=" display: inline-block;float: left;">