两个input在一行让它们能对齐

input明明写在同一行,高度也一样,在不同的浏览器或者手机上显示却不一样,经常会出现这样的情况

<input type="text" name="verify" placeholder ="请输入验证码" class="verify" /><input type="button" value="发送验证码" class="verify_code" />

加margin,padding都没能解决这个问题,网上搜了看到有人说给两个input加float可以实现对齐,鉴于浮动带来的一系列副作用来讲,

浮动虽然能解决这个问题,但浮动并不是最好的方法

实践中发现了另一个很好的解决办法,就是用我们熟悉的line-height

input{height:30px;line-height:30px;}

这样就好了,解决这个问题

 

posted @ 2017-09-25 18:01  c-137Summer  阅读(5079)  评论(0编辑  收藏  举报