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

最新推荐文章于 2023-05-22 21:29:53 发布

转载最新推荐文章于 2023-05-22 21:29:53 发布 · 3k 阅读

文章标签：

#input #xhtml #html #border #css #class

CSS 专栏收录该内容

37 篇文章

订阅专栏

本文探讨了在IE6浏览器中<UL>列表包含<input>控件时出现的行高属性失效问题，并提供了解决方案。通过定义input标签的宽度、高度和边距，实现了与其他列表项相同的视觉效果。

为什么<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]

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

　　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]

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