css - 为何两个input的高度不一样?
本文介绍了css - 为何两个input的高度不一样?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
<div id="search">
<input class="left" type="text" />
<input class="search_btn" type="submit" value="搜索" />
</div>
*{
margin:0px;
padding:0px;
}
#search input.left{
border:2px solid red;
height:30px;
width:420px;
}
#search input.search_btn{
background:red;
width:70px;
height:30px;
border:2px solid red;
}
为何左侧的高度要高一些?此时,右侧的上边线比左侧短一点?
现在修改一下css
*{
margin:0px;
padding:0px;
}
#search input.left{
border:2px solid red;
height:30px;
width:420px;
}
#search input.search_btn{
background:red;
width:70px;
height:30px;
line-height:30px;
border:2px solid red;
}
左右两侧的上边线一样高了,但是,右侧的下边线又短了一点。
请解释一下?
解决方案
两个input的box-sizing属性是不应的,submit的默认是border-box,而text是content-box
统一就好了,然后垂直居中调一下,就行了。
input{
box-sizing:border-box;
vertical-align:middle;
}
这篇关于css - 为何两个input的高度不一样?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文