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

Question

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

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

以下是我在 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，我在下拉菜单中放了一个table。这给了我想要的行为，但会涉及对我预先存在的功能进行更大的重构。

  <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 元素上有这个 class：

<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，不太干净的方法是将边距设置为锚标签上热键字符串的最大宽度。

.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 出现问题，因此添加条件 class 只会在 IE 的情况下添加。（或你可以对所有浏览器使用这个不太干净的解决方案而不使用最大内容宽度）。

Plunker

P.S。我只考虑示例 1.A。否则 1.D 即 'Nowrap Table in Dropdown' 我猜是完美的。

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

Two items per row in ui-bootstrap drop-down menu

html

javascript

css

angularjs

angular-ui-bootstrap