html - Search button out of div -


here example of problem. can see clickable search button places litle bit higher search field.

enter image description here

html

 <div class="search_menu">                  <%= form_tag search_index_path, :method => 'get' %>                                                                       <%= text_field_tag :search, params[:search], :placeholder=> (i18n.t 'placeholder') %>                                        <%= image_submit_tag ('search_button_main.png'),:title=> (i18n.t 'search_now')  %>                            <%end%>      </div>   

css

.search_menu { display:block; float:right; width:200px; height:30px; } 

i tried

position:relative; top:10px;  

for either search field or button still every time search button in air. cause kind of problem?

there few ways align input field image. here 1 of easiest method giving vertical-align:bottom image.

.search_menu img{vertical-align:bottom; display:block;} 

update:

after seeing code clear instead of image input type=image in used. i've changed code little bit. check latest demo.

.search_menu input[type="image"]{vertical-align:bottom; display:inline-block;}


Comments

Popular posts from this blog

commonjs - How to write a typescript definition file for a node module that exports a function? -

openid - Okta: Failed to get authorization code through API call -

ios - Change Storyboard View using Seague -