相信明天会更好

今天媛媛问我一个关于水平导航栏的问题，确实把我给稳住了，记得老杨在做他的主题的时候曾经让我查过这个问题，但是当时没有用心去领会所以也就没有弄懂，今天找了些资料，算是弄明白怎么回事了，现在跟大家分享一下：

首先水平导航栏通常是由如下代码构成的：

<ul class=“nav”>
<li><a href=“” >测试</a></li>
<li><a href=“” >首页页面</a></li>
<li><a href=“” >相册</a></li>
<li><a href=“” >关于我</a></li>
</ul>

那么要想把上述的代码制作成为一个水平的导航栏，有两种方法，一种是利用css中的display:inline来完成，但是这种方法有个毛病就是他的效果是是每一个分类不是相同的大小，字数不一样，那么大小不一样，如果想要每一个选项具有相同的大小就要如下方法实现：

这样可以实现导航栏中的每一条都有相同的宽度，而且文字居中。效果如图：

ps：

• a，span等都是行内元素，那么如果在行内元素上设置width是不会起作用的。
• 如果想用第一种方法那么要在li上设置样式display:inline,同时注意a不能设置它的display:block否则不会水平显示。