Web标准实战CSS网页布局 Google首页
> 有网友在fun52.com的留言板中提出一个问题：为什么UL列表含input控件时，行高属性在IE6.0下失效？FF2.0下正常。这是一个不常见的问题，我们不提倡这样的布局方式，input元素尽可能的使
>
有网友在fun52.com的留言板中提出一个问题：为什么<UL>列表含<input>控件时，行高属性在IE6.0下失效？FF2.0下正常。这是一个不常见的问题，我们不提倡这样的布局方式，input元素尽可能的使用lable标签而不是包含于ul的li标签中。但在实际操作中，也可能存在这样的情况，我们就ul列表中包含input时line-height属性失效的问题作一些探讨。
我们知道input标签是一个block元素，也就是一个块元素，而line-height只可以应用于inline行内元素。所以line-height属性的设置对input元素是无效的。我们看下面的代码：
<!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.fun52.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>fun52.com首页</li></ul></body></html>
CSS模板下载所在的li标签及input元素，行高明显的小于40px。因为input是block元素无line-height属性可言。我们只能通过变通的方法来解决问题。 首先我们定义好input标签的外观，即他的宽度与高度。然后设置边距，使其达到与其它li列表项同样行高的视觉效果，而不是通过line-height属性来实现。
input {
border:1px solid #666;
width:120px;
height:20px;
margin:10px 0;
vertical-align:middle;
line-height:20px;
第 1 2 页
<!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.fun52.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>fun52.com首页</li></ul></body></html>
CSS模板下载所在的li标签及input元素，行高明显的小于40px。因为input是block元素无line-height属性可言。我们只能通过变通的方法来解决问题。 首先我们定义好input标签的外观，即他的宽度与高度。然后设置边距，使其达到与其它li列表项同样行高的视觉效果，而不是通过line-height属性来实现。
input {
border:1px solid #666;
width:120px;
height:20px;
margin:10px 0;
vertical-align:middle;
line-height:20px;
第 1 2 页
精彩图集
精彩文章