css - CSS:之后元素被推到新行

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

我已经删去了所有多余的代码，但是尝试保留所有可能造成此问题的代码。在此示例中，我暂时将分隔符图像替换为“ x”，它的工作原理相同。

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

您还可以在以下部分中通过将WIDTH从4px更改为大于或等于6px的内容来在Chrome / IE中重新创建问题：

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;
}

抱歉，如果我错过了一些愚蠢的事情。并感谢您的帮助！

最佳答案

因此，由于a标记在:before和:after之间，并且:before标记是float:left；您需要添加float:left和a，以使:after正确地变为float:right。

加上这个

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

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

关于css - CSS:之后元素被推到新行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22239546/