有如下代码
<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;}
效果如图:
希望能帮到大家。