如何调整我的搜索框和搜索按钮以具有相同的高度

Question

我的视图中有以下代码：

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

但结果是我有我的搜索框＆amp;底部与下面的高度不同：

有没有办法修改我的HTML以强制它们的高度完全相同。

Answer 1

你可以使用自己的css样式来推送搜索表单或搜索按钮。

我不知道您使用的Twitter Bootstrap版本，但您可以使用在搜索按钮中添加一个名为“push-up-button”的类，并使用以下命令在css中定义此类：

.push-up-button {
  margin-bottom: 10px;
}

您的按钮应该是：

<input type="submit" value="Search" class="btn btn-primary push-up-button"/>

Answer 2

您可以专门设置相同的属性line-height：

 .searchInput, .btn-primary {
   margin:0;
   padding:0;
   line-height:25px;
 }

观看此演示 http://jsfiddle.net/s6Q6h/4/ 。

您需要在两者中设置相同的高度，因此请注意输入的边框，您可以在边框的输入中取消line-height的2px。