之前写搜索框时没注意这个问题,按正常而定写法input框和button边框总是不能对齐,可以在控制台通过实验button的marign-top来调节,但是还是不太好的
这里的总会出现错位;
解决1:
在input和button外层都加一层span,使两个span对齐,处理input边框就行了,
代码:
html:
<div class="search">
<span class="span1">
<input type="text">
</span>
<span class="span2">
<button>百度一下</button>
</span>
</div>
css:
.search{
width: 700px;
height:38px;
position: absolute;
left: 50%;
margin-left:-350px;
}
span{
float: left;
height: 40px;
}
.span1{
box-sizing: border-box;
width: 500px;
border: 1px solid #ccc;
}
input{
position: absolute;
border: 0 none;
width: 400px;
height: 30px;
padding: 0px;
outline: none;
font-size: 16px;
}
button{
height: 40px;
width: 100px;
border: 1px solid blue;
font-size: 15px;
background:blue;
color:#fff;
}
解决2:
html:
<div class="content">
<input type="text"><button>百度一下</button>
</div>
css:
使用
在input中使用box-sizing: border-box;和 vertical-align: top;
input{
box-sizing: border-box;
width: 500px;
height: 40px;
vertical-align: top;
}
button{
width: 100px;
height: 40px;
border: 1px solid blue;
font-size: 16px;
color:#fff;
background:blue;
}
最终都会呈现对齐的