html - div 外的搜索按钮

Question

这是我的问题的例子。您可以看到可点击的搜索按钮位置略高于搜索字段。

HTML

 <div class="search_menu">             
    <%= form_tag search_index_path, :method => 'get' do %>                                                          
            <%= 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;
}

我试过了

position:relative;
top:10px; 

对于搜索字段或按钮，但每次搜索按钮都悬而未决。什么会导致这种问题？

Answer 1

有几种方法可以将输入字段与图像对齐。这是最简单的方法之一，通过为图像提供 vertical-align:bottom。

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

更新:

在看到代码后，很明显使用了 input type=image 而不是图像。所以我稍微修改了一段代码。查看最新 DEMO .

.search_menu input[type="image"]{vertical-align:bottom;显示:内联 block ；