html - CSS::after 选择器在我的菜单中换行并移动文本

Question

最新的浏览器(Chrome、Safari、IE)发生了一些变化，我不明白为什么现在看起来很糟糕。我说的网站是here (“写作”菜单)，我无法为这个问题构建一个最小化的 fiddle (抱歉)。

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

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

所以对于那些 <li>具有另一个子菜单的元素(即嵌套的 <ul> )我想自动添加右对齐的“>”。这直到最近才奏效。然而，随着一些最新的浏览器更新，“>”似乎并没有扩展 <ul> 的宽度。不再而是绕到下一行。

我试图以某种方式加宽 <ul> (目前设置为 width:auto )但这没有帮助；设置 <li>或 <a>在列表项内到 white-space:nowrap也没有帮助。但是，我注意到当我删除 float 时然后所有“>”都在那里，只是没有很好地对齐到右侧。

我该如何解决这个问题？

Answer 1

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

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

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

但是如果你想在 > 和文本之间进行一些分离，使用

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