Question

这是我第一次在这里发帖提问。

我在网站设计上使用twitter bootstrap。我必须创建导航菜单，使其中列出的项目将与管道分开。我在这里找到了另一个类似的问题 - Add a pipe separator after items in an unordered list unless that item is the last on a line并且我使用了它，但这些项目并没有按照预期分开。

我需要得到什么：http://prntscr.com/4br2lb

从我在这里找到的帖子中实现代码后，我得到了这个：http://prntscr.com/4br2yj

这是我的代码：

HTML：

<div class="navbar navbar-default navbar-static-top header-menu">
        <div class="collapse navbar-collapse navHeaderMenuCollapse">
            <ul class="nav navbar-nav navbar-middle navbar-text" style="float:none;margin: 0 auto; display: table;table-layout: fixed;">
                <li><a href="#">HOME</a></li>
                <li><a href="#">AUTO</a></li>
                <li><a href="#">LIFE</a></li>
                <li><a href="#">HEALTH</a></li>
                <li><a href="#">BUSINESS</a></li>
                <li><a href="#">MORE...</a></li>
            </ul>
        </div>
    </div>

CSS：

ul li { 
float: left; }
ul li:after {
content: "|"; padding: 0 .5em; }

提前谢谢！

Answer 1

为什么不为每个li使用边框而不是最后一个？ E.g：

Demo Fiddle

ul li:not(:last-child) {
    border-right:1px solid grey;
    margin-right:20px;
    padding-right:20px;
}

否则，您可能需要为:after psuedo元素添加定位或将显示更改为inline-block - 尽管很难说无法使用提供的代码复制您的问题。< / p>

Answer 2

将a标记切换为内联块修复

div.navbar a {
    display: inline-block;
}
ul li:after {
    content: "|";
}
ul li:last-child:after {
    content: "";
}

jsfiddle demo

如何使用管道分隔链接项

2 个答案:

Demo Fiddle