javascript - ui-bootstrap 下拉菜单中每行两个元素

Question

我正在尝试仅使用 angularjs 和 ui-bootstrap 为网络应用程序创建下拉菜单。菜单类似于您在桌面应用程序中看到的菜单，菜单应显示左对齐标签，热键提醒文本应右对齐，并且在同一行。我正在寻找这样的东西:

http://imgur.com/WevtfId

下拉按钮也需要是像配置一样位于工具栏中的内联元素。我正在创建一个可重复使用的组件，其中每个下拉菜单都由一个对象支持，因此菜单宽度必须以适合下拉列表中最长行的长度的方式缩放。

以下是我在 plunker 中拼凑的一些示例:https://plnkr.co/edit/RAMgcuVoibeLkHTz4Z3e?p=preview

示例 1.A 显示了基本问题。当下拉列表中的第一个跨度变长时，它会将第二个跨度移到下一行。

  <span class="example-inline" uib-dropdown>
    <button type="button" class="btn btn-primary" uib-dropdown-toggle>
     A. Autowidth Dropdown
    </button>
    <ul class="dropdown-menu" uib-dropdown-menu>
      <li ng-repeat="item in ctrl.items">
        <a>
          <span style="float:left">{{item.label}}</span>
          <span style="float:right; padding-left: 15px;">{{item.hotkey}}</span>
        </a>
      </li>
    </ul>
  </span>

示例 2.A 有一个行为正确的下拉菜单。不幸的是，我必须将 uib-dropdown 指令附加到一个 block 元素，这意味着如果不做一些额外的工作，它就不能很好地放在工具栏中。

  <span class="example-block" uib-dropdown>
    <button type="button" class="btn btn-primary" uib-dropdown-toggle>
     A. Autowidth Dropdown
    </button>
    <ul class="dropdown-menu" uib-dropdown-menu>
      <li ng-repeat="item in ctrl.items">
        <a>
          <span style="float:left">{{item.label}}</span>
          <span style="float:right; padding-left: 15px;">{{item.hotkey}}</span>
        </a>
      </li>
    </ul>
  </span>

.example-block {
  padding: 5px 20px;
  display: block;
}

在示例 1.D 中，我在下拉菜单中放置了一个表格。这为我提供了我想要的行为，但会涉及对我预先存在的功能进行更大的重构。

  <span class="example-inline" uib-dropdown>
    <button type="button" class="btn btn-primary" uib-dropdown-toggle>
     D. Nowrap Table in Dropdown
    </button>
    <ul class="dropdown-menu" uib-dropdown-menu>
      <table style="white-space: nowrap;" class="dropdown-table">
        <tr  ng-repeat="item in ctrl.items">
          <td style="width:90%">
            {{item.label}}
          </td>
          <td style="width:10%">
            {{item.hotkey}}
          </td>
        </tr>
      </table>
    </ul>
  </span>

这里有更清洁的解决方案吗？我更喜欢 1.A 之类的东西，并进行了一些 css 调整。如有必要，我想避免大型重构。谢谢!

Answer 1

一个干净的解决方案是使用 css3 宽度最大内容值

.width-max-content {
  width: max-content;
  width: -moz-max-content;
  width: -webkit-max-content;
}

在 ul 元素上有这个类:

<span class="example-inline" uib-dropdown>
    <button type="button" class="btn btn-primary" uib-dropdown-toggle>
     A. Autowidth Dropdown
    </button>
    <ul class="dropdown-menu width-max-content" uib-dropdown-menu>
      <li ng-repeat="item in ctrl.items">
        <a>
          <span style="float:left">{{item.label}}</span>
          <span style="float:right; padding-left: 15px;">{{item.hotkey}}</span>
        </a>
      </li>
    </ul>
</span>

Plunker

现在这在 chrome、firefox、safari 中效果很好，但在 ie 中却不行，因为 IE 仍然不支持最大内容(IE 没有“-ms-max-content”版本)。

对于 IE 来说，不太干净的方法是将边距设置为 anchor 标签上热键字符串的最大宽度。

.hotkey-margin {
  margin-right: 6em;
}

在模板中:

<a class="hotkey-margin">
      <span style="float:left">{{item.label}}</span>
      <span style="float:right; padding-left: 15px;">{{item.hotkey}}</span>
</a>

仅当下拉列表位于内联元素上时才使用它。 此外，同时使用 max-content 和 margin right 会导致 chrome/moz/safari 出现问题，因此仅在 IE 的情况下才会添加此类添加条件。 (或者您可以对所有浏览器使用这个不太干净的解决方案并且不使用最大内容宽度)。

Plunker

附言我只考虑示例 1.A。否则 1.D 即“Nowrap Table in Dropdown”我猜是完美的。