html代码如下:
1 <div class="billtime clearfix"> 3 <span class="fl">原交易订单号:</span> 4 <input class="fl"/> 6 </div>
css代码如下:
1 .billtime { 2 line-height: 30px 3 } 4 .fl { 5 float: left 6 } 7 .clearfix { 8 *zoom:1 9 } 10 .clearfix:after { 11 content: ''; 12 display: block; 13 height: 0; 14 font-size: 0; 15 overflow: hidden; 16 clear: both 17 }
这时候input应该继承父级的line-height属性值,但是在浏览器中出现这样的效果。
我想要的是文字和input都垂直居中。
因为float将input转为了块级元素。如这篇文章里面写的 http://www.cnblogs.com/czaiz/p/5275183.html (应该可以这么理解吧)
line-height只影响行内元素,并不能直接应用于块级元素。
我想到的一种方法就是将fl类放在父级的div上(如果非要用浮动的话)。
有更多的解决方法请留言,谢谢。