Html CSS:：在选择器包装和移动“我的菜单”中的文本之后

最新的浏览器（Chrome、Safari、IE）已经发生了一些变化，我不明白为什么现在的情况看起来很糟糕。我正在谈论的站点是（“编写”菜单），我无法为这个问题构建一个最小化的提琴（抱歉）

我有一个标准的基于CSS的菜单，它是从无序的嵌套列表构建的，这些列表在鼠标悬停时显示/隐藏。对于还有另一个菜单的子菜单，我使用自动放置的“>”字符来表示。代码如下：

ul.menu li.arrow > a::after {
  content: ">";
  float: right;
  padding-left: 1em;
}

因此，对于那些具有另一个子菜单（即嵌套的

）的

元素，我希望自动添加右对齐的“>”。直到最近，这种方法才奏效。然而，在一些最新的浏览器更新中，“>”似乎不再扩展

的宽度，而是环绕到下一行

我试图以某种方式加宽

（它当前设置为

宽度：auto

），但没有帮助；将列表项中的

或

设置为

空白：nowrap

也没有帮助。但是，我注意到，当我移除

浮点时，所有的“>”都在那里，只是没有很好地与右侧对齐

如何解决此问题？
尝试使用
：before
而不是
：after
：

ul.menu li.arrow > a:before {
    content: ">";
    float: right;
    padding-left: 1em;
}

问题是浮动元素只能影响后面的元素，而不能影响前面的元素

但是如果您想在
和文本之间进行一些分隔，请使用

ul.menu li.arrow:before {
    content: ">";
    float: right;
}
ul.menu li.arrow > a {
    padding-right: 1em;
}

尝试使用
：before
而不是
：after
：

ul.menu li.arrow > a:before {
    content: ">";
    float: right;
    padding-left: 1em;
}

问题是浮动元素只能影响后面的元素，而不能影响前面的元素

但是如果您想在
和文本之间进行一些分隔，请使用

ul.menu li.arrow:before {
    content: ">";
    float: right;
}
ul.menu li.arrow > a {
    padding-right: 1em;
}

这似乎……怀疑：“最新浏览器（Chrome、Safari、IE）发生了一些变化”。。。你最后一次注意到它是在什么版本中运行的，你绝对确定没有任何代码被更改吗？我第一次注意到它是在我的朋友将他的iPhone升级到新的iOS时。网站在一两周内没有更新。事实上，菜单在我的Mac上可以使用Safari 5.1.10，在Chrome上可以使用，但在最新的Chrome 31.0.1650.57上不能使用。这似乎……有点怀疑：“最新的浏览器（Chrome、Safari、IE）发生了变化……”。。。你最后一次注意到它是在什么版本中运行的，你绝对确定没有任何代码被更改吗？我第一次注意到它是在我的朋友将他的iPhone升级到新的iOS时。网站在一两周内没有更新。事实上，在我的Mac上，Safari 5.1.10的菜单可以使用，但在最新的Chrome 31.0.1650.57上却不能使用。仅仅用
：：before
替换
：：before
并不太有效；不过，你的第二个建议效果不错！：）你能再详细解释一下你对浮动的解释吗？（为什么这不起作用了，我只能推测我一开始就错了，一个浏览器错误被修复了，暴露了我错误的CSS？@Jens-wird，我的第一个代码在Firefox28上对我有效。是的，您的代码可能因为浏览器错误而停止工作，因为规范没有更改，所以行为应该是相同的；不过，你的第二个建议效果不错！：）你能再详细解释一下你对浮动的解释吗？（为什么这不起作用了，我只能推测我一开始就错了，一个浏览器错误被修复了，暴露了我错误的CSS？@Jens-wird，我的第一个代码在Firefox28上对我有效。是的，您的代码可能因为浏览器错误而停止工作，因为规范没有更改，所以行为应该是相同的。