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

发布时间:2019-11-09编辑:脚本学堂
本文介绍下,在ul列表中包含input文本框时,line-height属性便失效的解决方法,学习下css line-heihgt属性的用法,有需要的朋友参考下。

问题描述:为什么<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>css line-height属性-www.jb200.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.jb200.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;
}

定义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元素是不起作用的。

最终的运行效果:
 

复制代码 代码示例:
<!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>css line-height属性-www.jb200.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>脚本学堂 首页</li>
</ul>
</body>
</html>