CSS 在导航选择器之后

Question

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

我用Bootstrap。当我在 li not a 上设置 after selector 时，内容会向下移动。这是我的 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

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

这看起来太复杂了。您应该简单地在您的 ul 上使用 display:inline，然后使用 padding 作为列表项之间的间距。然后您可以分别向左和向右浮动两个单独的列表以获得定位:).

Answer 2

这是为你工作的 fiddle - jsFiddle -

仅供参考：需要将结果部分扩展到足以让您的菜单项在一行上对齐。

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

解释

你的CSS就快完成了，但你犯了一个错误。

content: "|" black;

您不能在 content 属性上使用 CSS shorthand。你需要给 ::after 伪 class padding-left 使其居中对齐。

试试上面的方法jsFiddle希望这对你有帮助。

CSS 在导航选择器之后

CSS after selector in nav

css

css-selectors