如何强制搜索文本字段和搜索按钮具有完全相同的高度

Question

我的asp.net mvc web应用程序中有以下html： -

<form class="customSearch"method="GET" action="@Url.Action("Search", "Home")">

<input  class="searchInput  push-up-button" placeholder="Search by tag.." name="searchTerm2" data-autocomplete-source= "@Url.Action("AutoComplete", "Home")" type="text"/><input type="submit" value="Search" class="btn"/>
                            </form>

结果如下，

其中搜索按钮和文本字段具有不同的高度。那么我如何强制两个元素在同一个水平对齐上呢？

谢谢

Answer 1

首先重置input的所有值：

input {
   margin:0;
   padding:0;
   border:0;
}

然后设置相等的height，line-height，vertical-align和box-sizing：

input {
  height:30px;
  line-height:30px;
  vertical-align:middle;
  box-sizing:border-box;
}

之后，您可以使用横向padding和背景和文字的颜色对每个人进行个性化设置。

演示 http://jsfiddle.net/3TeHT/6/