CSS配合ul无序列表制作带有间隔线的导航栏

＂Ｍy!ove-、

在网站制作中，我们经常会用到类似这样的导航栏：

通常的做法是，我们在一行中写下这些链接，然后中间用键盘上的“|”来进行分割。（貌似很多朋友不会打这个竖线……），还有的朋友也许习惯用一个画有竖线的图片来实现，两者异曲同工。

今天我给大家提供一种思路，一种符合XHTML标准的实现方法，借助ul无序列表。

首先，我们按照标准的ul写法做出这样一个列表：

之后，我们利用如下的CSS样式一次性达到我们的需要：

上述代码对于熟悉CSS的朋友来说，应该是相当的简单，我们需要关注的只是2处被横线标注的位置，其中的玄机大家只需稍作思考就不难明白了。（你可以试着删除这2处，再对比有何不同。）

利用该方法的优点在于减少了不必要的装饰性竖线，使得文档更为干净且符合语义，而且绝对是近期提倡的“非主流”，呵呵。

补充一下：淘宝的商品分类目录就是采取的这种方式。