在菜单元素中向右对齐“左三角形”答案

【问题标题】：Align to right "left triangle" in menu element在菜单元素中向右对齐“左三角形”
【发布时间】：2014-07-28 23:50:51
【问题描述】：

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

我的问题是 Firefox 三角形（“▶”符号）显示在下一行而不是当前行...

Chromium 显示两种情况都很好。

防弹少年团有BUG和我的情况类似：

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

我尝试了 2 种策略，这是我的 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 用于游乐场。

我记得我读过代码，其中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%;
}

【问题讨论】：

标签： html css firefox menu

【解决方案1】：

摆脱“空白：nowrap”有帮助

【讨论】：

是的。但是正如我提到的，我构建了菜单并且需要white-space: nowrap 来防止菜单元素变成多行...

【解决方案2】：

终于solve problem:

<div class="container">
  Top level menu (hover on me)
  <div class="box">
    <div class="submenu">
      <div class="name">Long submenu 1</div>
      <div class="box">        
        <a href="#">Item 1</a>
        <a href="#">Item 2</a>
      </div>
    </div>
    <a href="#">Item 1 1 1</a>
    <a href="#">Item 2</a>
    <div class="submenu">
      <div class="name">Very long submenu 2</div>
      <div class="box">        
        <a href="#">Item 1</a>
        <a href="#">Item 2</a>
        <a href="#">Item 3</a>
      </div>
    </div>
    <a href="#">Item 1</a>
    <a href="#">Item 2</a>
  </div>
</div>

和：

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

a, .name {
  white-space: nowrap;
  display: block;
}
.name {
  padding-right: 1.2em;
  position: relative;
}
.name:after {
  content: "▶";
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: -1em;
}

基本部分是用block和position: relative制作三角形元素，并通过padding-right: -1.2em为三角形预留空间，在元素后通过position: absolute定位三角形，并通过margin-left: -1em向后移动三角形。

【讨论】：