我的asp.net mvc网络应用程序中包含以下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>


结果如下



搜索按钮和文本字段的高度不同。那么,如何强制两个元素处于相同的水平对齐方式?

谢谢

最佳答案

首先,重置两个input的所有值:

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


然后设置相等的heightline-heightvertical-alignbox-sizing

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


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

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

10-07 19:40
查看更多