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

【问题标题】：How to change the default separator of my list items?如何更改我的列表项的默认分隔符？
【发布时间】：2015-02-09 18:41:36
【问题描述】：

在我的 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);
}

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

【问题讨论】：

标签： css menu separator divider

【解决方案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>

【讨论】：