html - 在菜单元素中向右对齐 "left triangle"

Question

我构建 HTML/CSS/JS 菜单并希望将箭头向右对齐以指向该元素是子菜单。

我的问题是在 Firefox 中三 Angular 形(“▶”符号)显示在下一行而不是当前行...

Chromium 在这两种情况下都表现良好。

防弹少年团有类似我的情况的错误:

• https://bugzilla.mozilla.org/show_bug.cgi?id=488725

我尝试了两种策略，这是我的 HTML 结构:

<div class="name1">Submenu 1<span class="sub">▶</span></div>
  <a href="#">Item 1</a>
  <a href="#">Item 2</a>
<div class="name2">Submenu 2</div>
  <a href="#">Item 1</a>
  <a href="#">Item 2</a>

这是我显示问题的 CSS:

a, .name1, .name2 {
  display: block;
  white-space: nowrap;
}
.name1 > .sub {
  float: right;
}
.name2:after {
  content: "▶";
  float: right;
}

JS Fiddle Playground 。

我记得我读过代码，其中 margin-right: -16px 或类似的代码与背景图片或其他东西一起使用来进行这样的设计，但我记不清具体是怎么做的了。

有什么解决方法？

更新 我做了 more complete example , HTML:

<div class="container">
  Top level menu
  <div class="box">
    <div class="name1">Very long submenu 1<span class="sub">▶</span></div>
    <a href="#">Item 1 1 1</a>
    <a href="#">Item 2</a>
    <div class="name2">Very long submenu 2</div>
    <a href="#">Item 1</a>
    <a href="#">Item 2</a>
  </div>
</div>

CSS:

a { border: green 1px dotted; margin: 2px; }
a, .name1, .name2 {
  display: block;
  white-space: nowrap;
}
.name1 > .sub {
  display: inline-block;
  float: right;
}
.name2:after {
  content: "▶";
  float: right;
}

.container {
    display: inline-block;
    background: gold;
    position: relative;
}
.box { display: none; }
.container:hover > .box {
  display: block;
  position: absolute;
  top: 100%;
}

Answer 1

摆脱“white-space: nowrap”有帮助