导航中的选择器后面的CSS

Question

我尝试在我的CSS代码中使用选择器后，但是没有很好地居中。

我使用Bootstrap。当我在li上设置选择器而不是a时，内容会向下移动。 这是我的HTML代码：

<nav class="navbar">
                <div class="row">
                    <div class="col-md-2">
                        <img src="/images/logo3.png" class="img-responsive">
                    </div>
                    <div class="col-md-5">
                        <ul class="nav navbar-nav">
                            <li><a href="index.ejs">Home</a></li>
                            <li><a href="index.ejs">Prices</a></li>
                        </ul>
                    </div>
                    <div class="col-md-5">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="index.ejs">Projects</a></li>
                            <li><a href="index.ejs">Logout</a></li>
                        </ul>
                    </div>
                </div>
</nav>

这是CSS代码：

.navbar-nav li a::after {
    content: "|" black;
}

.navbar-nav li:last-child a::after {
    content: " ";
}

Answer 1

这里有适合你的小提琴 - jsFiddle -

仅供参考：需要扩展结果部分，以使菜单项在一行上对齐。

PS ：我只是希望你在那里使用 我的建议2 （最好的是第三个，但是这取决于你需要什么样的菜单）。使用伪类在菜单中获取这些分隔符并不是一个好习惯。它可以节省HTML代码的数量，但在这些菜单项之间使用额外的li时更像是这样。

<强>说明

你的CSS几乎就在那里，但你犯了一个错误。

content: "|" black;

您无法在CSS shorthand属性上使用content。并且您需要提供::after伪类padding-left以使其居中对齐。

尝试以上jsFiddle希望这有帮助。

Answer 2

这是一条评论，但我认为这是正确答案所以^^

这似乎非常复杂。您只需在ul上使用display：inline，然后在列表项之间使用填充。然后，您可以分别向左和向右浮动两个单独的列表以获得定位：）。