ui-bootstrap 下拉菜单中每行两个项目答案

【问题标题】：Two items per row in ui-bootstrap drop-down menuui-bootstrap 下拉菜单中每行两个项目
【发布时间】：2017-08-24 22:18:42
【问题描述】：

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

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 指令附加到一个块元素上，这意味着如果没有一些额外的工作，它就不能很好地放在工具栏中。

  <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>

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

【问题讨论】：

标签： javascript html css angularjs angular-ui-bootstrap

【解决方案1】：

一个干净的解决方案是使用 css3 width max-content value

.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 中仍然不支持 max-content（IE 没有“-ms-max-content”版本）。

对于 IE，不太干净的方法是在锚标签上设置热键字符串的最大宽度。

.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 表”我猜会是完美的。

【讨论】：