论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

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

文章类别:div+css布局 | 发表日期:2008-10-5 15:32:42

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

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

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

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

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

div css xhtml xml Example Source Code Example Source Code [www.21shipin.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元素是不起作用的。我们看最终的运行效果:

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058