#nav ul li{
width:100px;
float:left;
list-style:none;
}
为了便于观察我们暂且将<li>标签的背景设置成红色(设置背景色，是页面布局中一个很重要的方法，便于查看块状元素区域范围)
CSS代码：
#nav ul li{
width:100px;
float:left;
list-style:none;
background:#900;
}
效果如下： 
瞧瞧，发现问题了吧，我们的<li>标签的高度并没有和我们的盒子的高度一样，这就是为什么在布局页面的时候，经常会设置一下背景色，就是这个道理，不然的话，你是发下不了隐藏的问题，但是往往这些隐藏的问题就会导致页面浏览器的兼容性大大降低哟~
现在暂不把<li>标签的背景色去掉，当我们把它调成我们需要的效果的时候再去掉！
继续，我们把li的高度设置成盒子的高度35像素，代码自己写，怎么样，高度一样了吧，但是文字却位于顶端，如何将它设置成居中呢，对喽~设置行距(如果你不会，建议你看看这篇文章《两种方法实现垂直居中》)，在<li>的CSS代码中再加入下面这句代码：
line-height:35px;
效果是不是和下图一样呢 
好垂直居中解决了，轮到水平居中了，这个就容易了吧，直接在<li>的CSS代码中再加入下面这句代码：
text-align:center;
怎么样，效果有点意思了吧~到这里我再发一次代码，保证大家每个步骤都学会！ 导航条2.rar (793 Bytes)
好~！做到这里，大家有没有想过一个问题，因为我们的<li>标签是设置了宽度为100像素，已经限定了它的宽度，如果文字多了它不会自动伸缩的自适应的，那这时候我们就需要去掉其宽度，这时候<li>的宽度就会缩小至文字的宽度，也就是说，如果我们再添加一些文字(把我们的酒杯换成一个大个的)，这个<li>也会跟着变大，大家去掉宽度后试试，是不是这个样子，这样我们的导航条就比较灵活了，不会对“酒杯”的大小有所顾忌了！
此时的代码： 导航条3.rar (790 Bytes)
虽然这个宽度自适应解决了，但是给文字的空间太少，视觉上感觉不舒服，那么我们就帮它扩大一下空间，但是又要保证宽度自适应，解决方法很容易，加上左右内边距就ok了，这里设置边距为10px，在<li>标签加上下面代码，顺便把背景颜色去掉
padding:0 10px;
效果是不是这样 
无论你的“杯子”是增大还是缩小，<li>不但宽度会随之增大缩小，但是杯子和杯子之间的距离永远不变！怎么样有点意思吧~！
