HTML代码
<div id=”nav”>
<ul>
<li>CSS学习</li>
<li>学前准备</li>
<li>入门教程</li>
<li>提高教程</li>
<li>布局教程</li>
<li>精彩应用</li>
</ul>
</div>
CSS代码：
#nav ul{
width:960px;
height:35px;
}
效果作出来了没有，下面是在IE6和FF中显示效果(其他浏览器效果大家自己测试，总结规律)： 
效果不一样吧，没关系，IE6中盒子被撑大，FF中却没有，但是我们的“酒杯”却出来了，还有我们不希望我们的酒杯纵向排列，而是横向排列，怎么办呢？给大家一分钟时间想~~~
想出来了没有？什么没有？
没关系，我带着大家想想，因为<li>标签也是块状元素，所以他也有块状元素的“霸道”，不允许其他元素和自己处于同一行，总共六个<li>,所以他们六个就像台阶似的纵向排列起来了，我提示到这里，大家应该知道怎么做才能让这些“酒杯”横向排列了吧！^_^
对喽~用浮动Float！可是让谁浮动呢，当然是<li>标签喽~代码如下：
#nav ul li{ float:left;}
效果是不是和下面的一样呢 
大家会发现虽然“酒杯”横向排列了，但IE6和FF中的效果还是不一样的
1）盒子(#nav)高度不一样
2) 在FF中“酒杯”前面有个大黑圆点，而IE6中却没有！
解决上面这两个问题，也很容易，如下
1）做到这里标签ul和li有没有进行重置？只要我们在页面中新写一个标签，就要进行重置，做法是，将ul、li标签加入重置代码中“body,div,ul,li{padding:0; margin:0;}”
2）“酒杯”前面的大黑圆点，是FF给li标签定义的默认样式，我们只需要将li的默认样式去掉就是了，在li标签的CSS属性中加入“list-style:none;”就OK了
现在在瞅瞅，两种浏览器的显示效果是不是和下图一样了呢~ 
如果你做到这里的效果和我说的不一样，没关系，我把做到目前第二步的代码发出来，你对着上面说的再看看，绝对可以学会 导航条1.rar (763 Bytes) 下载次数: 299
【第三步】
第二步的效果还不是我们想要的，所有的“酒杯”都没有保持“车距”，后面的文字全部贴着前面的文字。
好~！我们现在就将他们分开！设置<li>标签的宽度为100像素：
CSS代码：
