使用UL 列表结构建立横向导航栏需要注意的问题
2007-05-22 17:34
369 查看
今天在使用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代码。
这大概是初学者经常会碰到的问题吧。
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代码。
这大概是初学者经常会碰到的问题吧。
相关文章推荐
- TCP建立和释放原理和需要注意的问题
- php中使用$_REQUEST需要注意的一个问题
- javascript 使用 NodeList需要注意的问题
- 使用接插件需要注意的问题
- 使用异常处理语句需要注意的几个问题
- 基于Android SDK-在64位Linux中使用需要注意的问题
- 使用fwrite,fread需要注意的问题
- 使用Linux raw socket时需要注意的一些问题
- php下使用iconv需要注意的问题
- 做移动应用使用地图API时需要注意的问题
- Android APP设计加载使用gif动图需要注意的一般性问题
- php的crc32函数使用时需要注意的问题(不然就是坑)
- 使用FlashPlayer11.2测试右键需要注意的问题
- Firefox中Javascript使用event对象需要注意的问题
- 使用系统照相机需要注意的问题
- jeecg使用内嵌tomcat进行调试开发时需要注意的问题
- 使用jQuery Ajax功能的时候需要注意的一个问题
- 使用btrace需要注意的几个问题
- 使用OpenSessionInView解决懒加载需要注意的问题
- 在使用微软提供的安全模版(安全策略)时需要注意的安全问题