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

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，因为它太过分了（尽管不是很过分）。您可以改用浮点数：

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>

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

How to change the default separator of my list items?

css

menu

separator

divider