li标签问题

来源：互联网发布：编程范式的研究编辑：程序博客网时间：2024/05/20 22:04

在组建列表或者导航栏时,经常用到li,下面讲一下我发现的一些有关li的问题.

看看下面页面源码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

body{

margin:0px;

padding:0px;

}

ul{

margin:0;

padding:0;

}

li{

padding:0;

margin:0;

}

li a{

display:block;

text-decoration:none;

width:138px;

border:1px solid #ccc;

}

</style>

</head>

<body>

<ul>

</ul>

</body>

</html>

把代码复制到网页源文件,正常显示,两个a紧密连接在一起.但当在li a中加入一句:font-size:12px;时,就出现问题了.

此时发现两个a标签之间产生一段距离,两者边框相离.为了查明是否li有问题还是a有问题,所以这里在li中加入border:1px solid red;查看一下.发现a在li的内部,而且a距离li的边框具有一定的距离.是否a的外边框出现问题?再尝试在li a中加入一句:margin:0;padding:0;发现还是这样.即使怎么调,也无发让li靠近.这个就是li所存在的一个问题.

为什么li不能靠近改变字体大小后的a,在这里,我觉得这是IE经常发生的一个问题,"高度不适应"问题.就是说当改变子容器的某个特性后,载体不能及时变更其容积,这时候就需要改变一下它的变化规律,从而获得我们效果.

在这里我的解决方法是让font-size:12px;不要放到a里,这样载体不能及时响应其变化,我把它放到了最外的载体ul,然后再由它的高度问题,我受到启发,于是在ul里加上一句height:1%;经调试后,发现li的高度重新计算了,也达到了原来的效果.

在这个问题上存在第二个解决方法,其思路是让其li改为浮动,让它们时刻计算自己.实际上,就是在ul里加上width:138px;然后再在li里加上float:left;其它和原来一样即可.