ul列表中包含input时line-height属性失效的解决办法

为什么<UL>列表含<input>控件时，行高属性在IE6.0下失效？FF2.0下正常。这是一个不常见的问题，我们不提倡这样的布局方式，input元素尽可能的使用lable标签而不是包含于ul的li标签中。但在实际操作中，也可能存在这样的情况，我们就ul列表中包含input时line-height属性失效的问题作一些探讨。

　　我们知道input标签是一个block元素，也就是一个块元素，而line-height只可以应用于inline行内元素。所以line-height属性的设置对input元素是无效的。我们看下面的代码：

Source Code to Run [www.52css.com]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>www.52css.com</title> <style type="text/css"> #hehe {width:300px;} #hehe li {line-height:40px;} input {line-height:40px;} </style> </head> <body> <ul id="hehe"> <li>Div+CSS教程</li> <li>CSS布局实例</li> <li>CSS2.0教程</li> <li>CSS模板下载<input name="text" type="text" /></li> <li>CSS酷站欣赏</li> <li>Web标准</li> <li>www.cm1314.cn首页</li> </ul> </body> </html>
[ 可先修改部分代码再运行查看效果 ]

　　CSS模板下载所在的li标签及input元素，行高明显的小于40px。因为input是block元素无line-height属性可言。我们只能通过变通的方法来解决问题。

　　首先我们定义好input标签的外观，即他的宽度与高度。然后设置边距，使其达到与其它li列表项同样行高的视觉效果，而不是通过line-height属性来实现。

Example Source Code [www.52css.com]

input {
    border:1px solid #666;
    width:120px;
    height:20px;
    margin:10px 0;
    vertical-align:middle;
    line-height:20px;
}

　　我们定义input元素的边框为一象素的灰色实线。宽度与高度分别是120px与20px。我们定义的li列表项的行高为40px。要使input元素如其它列表项一样，则设置input元素的上下边距为10px。即达到了行距为40px的效果。但这样会造成“CSS模板下载”与input标签水平不对齐，我们设置vertical-align:middle。使得文字与输入框水平对齐。关于vertical-align:middle的相关知识，请参考本站相关文章。心细的你或许会发现，我们这里也设置了line-height属性，值是20px。这里的line-height属性设置是input输入文字的行高，我们这样设置，可以使输入文字在输入框垂直居中。
　　通过此例，我们应该注意区分不同的属性所能作用的对象，line-height属性是inline元素所拥有的，对于block元素是不起作用的。我们看最终的运行效果：

Source Code to Run [www.52css.com]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>www.52css.com</title> <style type="text/css"> #hehe {width:300px;} #hehe li {line-height:40px;} input {border:1px solid #666; width:120px; height:20px; margin:10px 0;vertical-align:middle; line-height:20px;} </style> </head> <body> <ul id="hehe"> <li>Div+CSS教程</li> <li>CSS布局实例</li> <li>CSS2.0教程</li> <li>CSS模板下载<input name="text" type="text" /></li> <li>CSS酷站欣赏</li> <li>Web标准</li> <li><a class="channel_keylink" href="http://www.cm1314.cn" target="_blank">草堂学舍</a>首页</li> </ul> </body> </html>
[ 可先修改部分代码再运行查看效果 ]

ul列表中包含input时line-height属性失效的解决办法相关推荐

python 十六进制转中文_Python列表中包含中文时输出十六进制转中文的小方法
现象:列表中的中文打印出来后显示为十六进制>>> lt=['大神','zhzhgo'] >>> print lt ['\xb4\xf3\xc9\xf1', 'zhz ...
win7-64位系统下，VC++2010中设置FFTW时遇到的若干问题及解决办法
本文转自(复制,黏贴)"老橘皮的马甲的博客",作者写的很简单清楚,但很有用.注意64位的系统也可能需药32位的FFTW. 博士学长发给我一个C++源文件及头文件fftw3.h,让我 ...
安装pytorch时，anaconda的Jupyter Notebook中出现实心圆，并且代码失效的解决办法
最近我开始进行深度学习(Pytorch),需要用到anaconda中Jupyter Notebook的torch模块,因为之前闲暇时下载过anaconda,以为可以直接加载torch模块,是我太天真了 ...
标签中包含input时line-height属性失效的解决办法
今天在项目中碰到一个问题,就是在ie6下,p标签的line-height不起作用.琢磨了好久,在javascript罗浮宫的同学提示下,才知道包含了input标签时,ie6下行高会失效,其它浏览器均正 ...
vim复制代码包含注释时格式会乱掉的解决办法
每次复制代码时,如果代码里有 // 这样的注释就容易让格式乱掉,通过下面的设置就可以避免这种情况. 粘贴代码时取消自动缩进 VIM在粘贴代码时会自动缩进,把代码搞得一团糟糕,甚至可能因为某行的一个注释 ...
C#在循环中使用Random时生成的随机数相同的解决办法
场景在循环中使用 Random y = new Random(); 生成随机数时每次循环生成的数是一样的. for (int i = 1; i < 20000;i++ ){Random y = ...
关于Office软件中Word输入时卡顿无反应的解决办法！
最近在安装office2013时遇到了这样一个问题,就是在激活office之后,打开Word输入内容时十分卡顿.也是狂搜网上各种办法,有说改注册表的,也有说在office选项里设置什么输入法的,全试了 ...
iOS 项目中包含多个 FFMPEG 方法冲突的通用解决办法。
参考:http://blog.csdn.net/jhy835239104/article/details/53377633 现在的项目中没个视频播放,在线直播都不好意思说自己是 app了. 一个项目中 ...
当button具有disabled属性时，el-tooltip也失效。解决办法
就很神奇,将button设置为disabled不能点击时,上边的el-tooltip也消失了. 但是项目里需要的是el-tooltip一直都在,无论按钮是否可用. 如官网里写的下图这样,就会导致按钮失 ...
eclipse中格式化代码快捷键Ctrl+Shift+F失效的解决办法
很长一段时间我的eclipse都有个毛病,就是当我要格式化代码的时候,右键-source-format能够起效,但ctrl+shift+f不好使了. 可以基本断定是快捷键与别的软件冲突了,但一直也没时 ...

ul列表中包含input时line-height属性失效的解决办法

ul列表中包含input时line-height属性失效的解决办法相关推荐

最新文章

热门文章