有关input[text]与button的错位问题
有如下代码
<style>
.search-box {
overflow: hidden;}
.search-box input,.search-box button{
border:none;padding:5px;}
.search-box input{
border:2px solid #518a78;width:500px;height:20px;}
.search-box button{
width:60px;height:34px;background: #518a78;}
</style>
<div class="search-box">
<input type="text" value="">
<button class="btn">提交</button>
</div>
上述代码展示结果
如何去除两个元素之间的空格呢，我所知的方法有两种。 1、在父元素的样式内加上font-size: 0，即：.search-box {overflow: hidden;font-size: 0} 2、将元素之间的空格去除，即<input type="text" value=""><button class="btn">提交</button>
效果如下图： 感觉有点错位了，再两个元素的样式上加上vertical-align: top，即
.search-box input,.search-box button{
border:none;padding:5px;vertical-align: top;}
效果如图： 希望能帮到大家。
