父级的line-height对加了浮动的子集input不管用

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上(如果非要用浮动的话)。

有更多的解决方法请留言,谢谢。

时间: 2024-10-06 14:36:57

父级的line-height对加了浮动的子集input不管用的相关文章

父级盒子无高度,子盒子浮动,高度自适应

利用浮动实现三列布局,中间宽度自适应 #box{ border: 1px solid red; } #left{ width: 120px; height: 300px; float:left; background-color: grey; } #main{ height: 500px; margin: 0 220px 0 140px; background-color:skyblue; } #right{ width: 200px; height: 600px; float: right;

&lt;转载&gt;如何解决子级用float浮动父级div高度不能自适应的问题

转载:http://www.kwstu.com/ArticleView/divcss_2013101582430202 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因. 如何解决父div对象自适应高度,方法有三种,接下来DIVCSS5逐一介绍. 1.首先我们先看HTML

解决子级用css float浮动 而父级div没高度不能自适应高度

解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因. 如何解决父div对象自适应高度,方法有三种,接下来DIVCSS5逐一介绍. 1.首先我们先看HTML源代码: <!DOCTYPE html> <html> <head> <meta cha

转:iframe加载的子页面里面获取父级元素窗口以及元素的高度

iframe里的js要操作父级窗口的dom,必须搞懂几个对象: parent是父窗口(如果窗口是顶级窗口,那么parent==self==top) top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe) self是当前窗口(等价window) 父级页面:index.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>父窗口<

先看看解析,事件委托:也称事件代理 就是利用冒泡的原理 把加事件加到父级上,触发执行效果

window.onload = function(){ var oUl = document.getElementById('ull'); var aLi = document.getElementsByTagName('li'); oUl.onmouseover = function(ev){ var event = ev||window.event; // 获取event对象 var target = ev.target || ev.srcElement; // 获取触发事件的目标对象 if

js获取iframe和父级之间元素,方法、属,获取iframe的高度自适应iframe高度

摘自:http://blog.csdn.net/kongjiea/article/details/38870399 1.在父页面 获取iframe子页面的元素 (在同域的情况下 且在http://下测试,且最好在iframe onload加载完毕后 dosomething...) js写法 a.同过contentWindow获取 也有用contentDocument 获取的 但是contentWindow 兼容各个浏览器,可取得子窗口的 window 对象.contentDocument Fir

ifarme获取父级元素

js写法 a.同过contentWindow获取 也有用contentDocument 获取的 但是contentWindow 兼容各个浏览器,可取得子窗口的 window 对象.contentDocument Firefox 支持,> ie8 的ie支持.可取得子窗口的 document 对象. 获取方法 [html] view plaincopyprint? var frameWin=document.getElementById('iframe').contentWindow;    //

WPF利用VisualTreeHelper遍历寻找对象的子级对象或者父级对象

简介 本文将完整叙述我利用VisualTreeHelper实现题述功能的全部过程,想直接看函数实现的朋友可以跳到函数实现部分. 或者直接在GitHub上下载源码. 在WPF中我们经常会遇到这种情况:当我们尝试着去寻找窗体或者页面中某个控件的子控件或者父控件的时候,我们只能寻找到它的第一级的逻辑子级对象或者父级对象.当我们想更深入的时候,就没有办法了. 甚至在我们自定义的DataTemplate中的控件,我们都没办法对其访问.比如在ListView中自定义的控件,我们就没办法获取指定位置的控件了.

子级用css float浮动 而父级div没高度不能自适应高度

子级对象使用css float浮动 而父级div不能自适应高度. 对父级div标签闭合</div>前加一个clear清除浮动对象. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>父div不自适应高度实例</title> <style> .divcss5{width:500px;border:1px solid #0