Question

我正在尝试在每个列表项之前和之后设置带分隔符的导航栏。在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;
}

如果我错过了一些愚蠢的东西，请道歉。谢谢你的帮助！

Answer 1

因为a代码位于:before和:after之间，:before代码是float:left;您需要添加float:left a，才能正确:after到float:right。

添加此

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

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

CSS：将元素推送到新行之后

1 个答案: