input type为text和button的不对齐问题 以及 之间的小空格

今天实验室学弟问我 “怎么这个输入、搜索按钮怎么都对不齐啊”

就像这样子:

咦 怎么会 我看看 代码没毛病啊 同样的height、同样的line-height,各有一个width(复习一下,input属于inline-block元素)

倒腾了好久 感觉甚是诡异 现在回想 怎么没有赶紧百度下 踩过这个坑的前辈们也是不少啊 

首先要说明的是这个现象只会出现在Chrome中 没想到这次会是Chrome的锅 在Firefox和IE下都比较正常

至于原因呢。。。有人这么说,不过我已经把它们的border、padding都设为0了,还是对不齐,所以不敢苟同,希望知道的大大告知


而解决方案呢 ,这就比较多了

1.包裹+浮动:如span+float:left

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值