推荐订阅源

今天在使用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>

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');
}

开始对于产生阶梯状的导航栏很奇怪，经过检查才发现，必须将超链接的float:left属性写LI中

#navigator ul li{
    float:left;
}

理由也非常简单，A标记是写在LI标记里面的，使用了float:left属性也只能是在LI内部实现向左浮动，所以实际上LI还是默认的垂直显示方式，其中的间距为列表默认间距。要实现导航栏项目的横向排列，还是需要在li中写上浮动的CSS代码。

这大概是初学者经常会碰到的问题吧。