今天在使用UL、LI建立横向导航栏的时候,发现一个奇怪的问题。导航栏的栏目是阶梯状下来的。
HTML代码如下:
<
div
id
="navigator"
>
< ul >
< li >< a href ="#" > 国家政策 </ a >
</ li >
< li >< a href ="#" > 学校规章 </ a >
</ li >
< li >< a href ="#" > 最新消息 </ a >
</ li >
< li >< a href ="#" > 常见问题 </ a >
</ li >
< li >< a href ="#" > 精品课程 </ a >
</ li >
< li >< a href ="#" > 表格下载 </ a >
</ li >
< li >< a href ="#" > 在线问答 </ a >
</ li >
< li >< a href ="#" > 联系我们 </ a >
</ li >
</ ul >
</ div >
< ul >
< li >< a href ="#" > 国家政策 </ a >
</ li >
< li >< a href ="#" > 学校规章 </ a >
</ li >
< li >< a href ="#" > 最新消息 </ a >
</ li >
< li >< a href ="#" > 常见问题 </ a >
</ li >
< li >< a href ="#" > 精品课程 </ a >
</ li >
< li >< a href ="#" > 表格下载 </ a >
</ li >
< li >< a href ="#" > 在线问答 </ a >
</ li >
< li >< a href ="#" > 联系我们 </ a >
</ li >
</ ul >
</ div >
CSS代码如下:
#navigator ul
{
padding : 0 ;
margin : 0 ;
list-style : none ;
}
#navigator ul li a {
width : 82px ;
height : 41px ;
padding-top : 12px ;
display : block ;
float : left ;
background-image : url('../img/navbg.jpg') ;
}
padding : 0 ;
margin : 0 ;
list-style : none ;
}
#navigator ul li a {
width : 82px ;
height : 41px ;
padding-top : 12px ;
display : block ;
float : left ;
background-image : url('../img/navbg.jpg') ;
}
开始对于产生阶梯状的导航栏很奇怪,经过检查才发现,必须将超链接的float:left属性写LI中
#navigator ul li {
float : left ;
}
理由也非常简单,A标记是写在LI标记里面的,使用了float:left属性也只能是在LI内部实现向左浮动,所以实际上LI还是默认的垂直显示方式,其中的间距为列表默认间距。要实现导航栏项目的横向排列,还是需要在li中写上浮动的CSS代码。
这大概是初学者经常会碰到的问题吧。