如何更改列表项的默认分隔符？

Question

在我的style.css中我有：

.navbar-default .navbar-nav > li > a {
    color: #fff;
    border-right: 1px solid rgba(0,0,0,.2);
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.10);
}

这会导致我的菜单显示： 主页|关于|博客|购物|

我希望它显示： 主页/关于/博客/商店

有没有人对我有任何暗示？我试过了：

.navbar-default .navbar-nav > li > a {
   color: #fff;
   content: "/" rgba(0,0,0,.2);
}

但这只是让分隔符完全消失了。

Answer 1

你根本不需要position:absolute，因为它过度杀伤（尽管不是太过分）。您可以使用浮点数：

＆＃13;

＆＃13;

li {
    display: inline-block;
    margin-left:10px; /* Adjust as needed */
}
li:not(:first-of-type):after { /* Exempts the first LI */
    display:block;
    float:left;
    margin-right:10px; /* Adjust as needed */
    content:"/";
}
  

＆＃13;

<ul>
    <li>Home</li>
    <li>Show</li>
    <li>About</li>
    <li>Contact</li>
</ul>

＆＃13;

＆＃13;

＆＃13;