输入不被父母

Question

完全包含我有了这个搜索表单：http://jsfiddle.net/1emsaoq1/2/

<div class="search_language"> 
    <div class="menu_search_container"> 
     <form action="/search"> 
      <input autocomplete="off" onkeydown="if (event.keyCode == 13) { this.form.submit(); return false; }" id="search_field" name="q" placeholder="Rechercher..." type="text"> 
      <a href="#" class="icon-search"></a> 
     </form> 
    </div> 
</div> 

我想要得到的是具有input红色div内垂直排列的结果。当我检查input和父母时，我可以清楚地看到它的父母很好地在红色div内对齐，但不是input。这里有什么问题？

Answer 1

添加vertical-align: top到#search_field元素：

Updated Example

.menu_search_container form #search_field { 
    /* other styles.. */ 
    vertical-align: top; 
} 

默认情况下，input元素的display是inline-block。另外，vertical-align的默认值是baseline。将值更改为top可以从根本上纠正您所看到的这种行为。

Answer 2

问题来自您的line-height到您的.search_langage，将其设置为零或关闭，并且您的问题将得到解决。