Html 在导航栏中创建虚线分隔符

我正在尝试为导航栏创建一个水平分隔符，如下所示：

我用HTML创建了一个简单的未列出的导航栏，创建了一个透明的GIF并将其应用于背景。虽然效果是我试图达到的，但我觉得间距有点偏，我似乎无法纠正它

这是我的CSS代码：

.on {
    display: inline; 
    background-image:url(images/seperator.gif);
    background-position: center right;
    background-repeat: no-repeat;
}

.last {
    background-image: none;
    padding-left: 0;

}

ul {
    width: 800px;
    padding: 5px;
    margin: 0px auto 0px auto;
    text-align: left;
}

li {    
    display: inline;    
    margin: 0px 3px;
}

a {
    color: #000000;
    text-transform: uppercase;
    text-decoration: none;
    padding: 6px 20px 5px 10px;
}

以下是导航栏的HTML：

<ul id="nav">
    <li><a href="#" class="on">Home</a></li>
    <li><a href="#" class="on">Shop</a></li>
    <li><a href="#" class="on">Contact</a></li>
    <li><a href="#" class="on last">Login</a></li>
</ul>

试试这个：

li{
    display: block;
    border-right: dashed black;
}

使用

li:not（：last child）

选择器排除最后一个

li

并添加右虚线

边框


.on{
显示：内联；
背景图片：url（images/separator.gif）；
背景位置：右中；
背景重复：无重复；
}
.最后{
背景图像：无；
左侧填充：0；
}
保险商实验室{
宽度：800px；
填充物：5px；
保证金：0px自动0px自动；
文本对齐：左对齐；
}
李{
显示：内联；
利润率：0px 3px；
}
a{
颜色：#000000；
文本转换：大写；
文字装饰：无；
填充：6px 20px 5px 10px；
}
李：不是（最后一个孩子）{
右边框：1px点黑色；
}





请发布相关的HTML。我已经用相关的HTML对其进行了更新。我之前在创建自己的分隔符之前尝试过，但我对结果不太满意，因为它感觉有点俗气。@Wolf，一旦LI是块类型并应用了边框，您可以操纵填充和边距以获得最佳效果。是否可以更改边框的高度？@Wolf-如果改用：伪元素，则可以。我将添加另一个片段。这非常完美，非常感谢您的帮助。最后一个问题是，我怎样才能使文章居中；我已将文本对齐：左移到文本对齐：右，但它不会移动。@Wolf-将
a
中的
padding
从
padding:6px 20px 5px 10px
更改为
padding:6px 20px 5px 20px或
填充：6px 10px 5px 10px。第二个值和最后一个值必须相同。