我的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;
}
然后设置相等的
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/