设置分割线在我多个的经验施行后，没有一成不变通用的方法，得根据要求采用最适合的。
1、使用字符“|”，适合导航栏间距不一致时，也就是不适合你。
2、采用背景方式，背景图片即是那条间隔线，需要形成jpg、gif、png格式的小图片，在背景里设置居左，并控制一下垂直位移，这样就会出现你第一张图的要求。
3、但最后一项可能会出现没有间隔线的情况，那么就多添加一个空的li或a，这样就多出来一个间隔线，好看。
具体细节需要把握，代码举例：
xlMenu a { background:url(menuLine.gif) no-repeat display:block width:77px text-align:center float:left}.xlMenu a.first { width:43px background:none text-align:left}
效果：
小图标：
很小很小的一条线。。。
一、定义一个盒子（“menu”）,用来装这个导航的。二、用无序列表（ul）中的列（li）放导航的内容。
三、把li的浮动（float）设置为向左浮动（float：left；），这样，就实现了水平导航条了。
四、在做其他的一些修饰。（下面我给我弄的一个简单的导航条给你理解）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#menu{
width:500px
margin:0 auto/*令盒子居中*/
font-size:20px /*定义字体的大小*/
}
ul{
margin:0padding:0/*把浏览器默认的间隔去掉*/
list-style:none /*把前面的序列号去掉*/
}
li{
float:left /*向左浮动，这个是实现水平的重要步骤！！*/
padding:0 15px /*li里面的字体和边框的距离*/
}
a{
text-decoration:none /*去掉超链接的下划线*/
color:#333 /*超链接的字体颜色*/
}
a:hover{
color:#696
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单1</a></li>
</ul>
</div>
</body>
</html>
首先，一般做导航条，都是通过ul、li来做，将ul包裹在一个div中，然后设置好width和height，分隔线，换个理解，给li一个右边的边框就可以了，通过代码来理解：<html>
<head>
<style>
#div1{
width:960px
height:30px
}
#div1 ul li{
float:left
width:60px
height:30px
border-right:1px solid
}
</style>
</head>
<body>
<div id='div1'>
<ul>
<li>muli1</li>
<li>muli1</li>
<li>muli1</li>
<li>muli1</li>
</ul>
</div>
</body>
</html>
