输入未被父母完全包含

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，将其设置为零或将其取消，您的问题将得到解决。