CSS：在元素被推到新行之后

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

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

我已经确认此JSFIDLE中的每个浏览器中都存在重复的行为，因此您必须在Firefox中查看该行为才能看到问题：

在下一节中，您还可以通过将宽度从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

和

:before

之间，而

:before

标记是

float:left

；您需要将

float:left

添加到

a

，以便将

：after

正确添加到

float:right

添加此项

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

---

演示：

谢谢你，你是人间的神！我用“float:left”替换了“display:inline block”，一切都正常了，就像你说的那样！所以，我的后续问题是，为什么内联块在这种情况下不起作用？我认为它迫使元素显示“inline”，意思是，在同一行上一个接一个地显示。。。？没有？当然。正如我在解决方案中提到的，

display:inline block

不会浮动元素，这就是为什么

:after

上的

float:right

没有被拾取的原因。