ul列表中包含input时line-height属性失效的解决办法
> 有网友在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" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.fun52.com</title>
</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;
第 1 2 页
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.fun52.com</title>
</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;
第 1 2 页
精彩图集
精彩文章