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

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>

但结果是我的搜索框和底部与以下高度不同：

有没有办法修改我的 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/。

您需要在两者中设置相等的高度，因此请注意输入的边框，您可以将输入的 2pxline-height用于边框。