CSS :after element being pushed to new line

Question

我试图在每个列表项前后设置一个带有分隔符的导航栏。在 Chrome 和 IE 中似乎一切正常，但在 Firefox 中，最后一个分隔符被推到另一行。

我已经删除了所有可能的无关代码，但试图留下任何可能对此负责的代码。在这个例子中，我暂时用“x”替换了分隔符图像，它的工作原理是一样的。

我已经确认此 JSFiddle 中的每个浏览器中的行为都是重复的，因此您必须在 Firefox 中查看它才能看到问题: http://jsfiddle.net/WGCyu/548/

您还可以在 Chrome/IE 中重现该问题，方法是在以下部分中将 WIDTH 从 4px 更改为任何大于或等于 6px 的值:

nav ul > li:before, nav ul > li:last-of-type:after {
    content:"x";
    float: left;
    position: relative;
    top: -2px;
    left: -2px;
    width:4px; /* change to 6px or more to recreate issue in Chrome */
    height:70px;
}

如果我错过了一些愚蠢的事情，我深表歉意。并感谢您的帮助!

Answer 1

所以因为a标签在:before和:after之间，而:before标签是 float :左；您需要将 float:left 添加到 a 中，以便 :after 正确地变为 float:right。

添加这个

nav ul > li > a {
    float: left;
}

演示:http://jsfiddle.net/WGCyu/550/