在组建列表或者导航栏时,经常用到li,下面讲一下我发现的一些有关li的问题.
看看下面页面源码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>css1</title> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<style type="text/css">...
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> <li><a href="#">aaa</a></li> <li><a href="#">bbb</a></li> </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;其它和原来一样即可.
扫一扫
1067
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
