设置 Angular UI 下拉列表的列表宽度

Question

In this plunk 我有一个 Angular UI 下拉列表，其中的选择列表具有最大高度。这工作正常，用户可以滚动列表。

我还设置了最大宽度，因为列表太宽了，但这不起作用。有什么解决办法吗？

HTML

  <div class="btn-group" uib-dropdown>
    <button id="btn-append-to-body" type="button" class="btn btn-primary" 
           uib-dropdown-toggle="">
          {{selection}} <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" uib-dropdown-menu="" role="menu" 
        style="max-height:80px;max-width:20px;overflow-y:auto"
        aria-labelledby="btn-append-to-body">
       <li role="menuitem">
          <a href="#" ng-click="selectItem('1')">1</a>
        </li>
        <li role="menuitem">
          <a href="#" ng-click="selectItem('2')">2</a>
        </li>
        <li role="menuitem">
          <a href="#" ng-click="selectItem('3')">3</a>
        </li>
        <li role="menuitem">
          <a href="#" ng-click="selectItem('4')">4</a>
        </li>
        <li role="menuitem">
          <a href="#" ng-click="selectItem('5')">5</a>
        </li>
        <li role="menuitem">
          <a href="#" ng-click="selectItem('6')">6</a>
        </li>
        <li role="menuitem">
          <a href="#" ng-click="selectItem('7')">7</a>
        </li>
    </ul>
  </div>

Answer 1

如果您使用浏览器开发工具检查 ul 的样式，您会看到它的最小宽度设置为 160px。将 if 设置为小于或等于您的最大宽度的值，您将拥有您想要的。