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

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);
}

这会导致我的菜单显示:Home | 关于| 博客| 购物|

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

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

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

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

Answer 1

你根本不需要position:absolute它,因为它太过分了(尽管不是太过分).您可以使用浮点数:

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:"/";
}
  

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