控制选择元素内选项的宽度答案

【问题标题】：controlling width of options inside select element控制选择元素内选项的宽度
【发布时间】：2018-10-30 21:51:10
【问题描述】：

我有一个具有一定宽度的选择元素。我的问题是如何使用 angular 控制选项的宽度，以便它们的输入长度与选择栏的宽度相同？我正在使用 ng-select 来设置选项。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Regular option", "Long option number 1", "Very very long option that doent mke sense"];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names" style="width: 180px">
</select>
</div>

<p>This example shows how to fill a dropdown list using the ng-options directive.</p>

</body>

【问题讨论】：

发布的问题似乎根本没有包含any attempt 来解决问题。 StackOverflow 希望您首先try to solve 您自己的问题，因为您的尝试有助于我们更好地了解您想要什么。请编辑问题以显示您尝试过的内容，以说明您在 Minimal, Complete, and Verifiable example 中遇到的具体问题。
我添加了一个描述我的问题的代码示例。
Select Option 元素由浏览器控制，在 css 中几乎没有控制。即使你这样做了，由于 Chrome、firefox、IE、IE Edge 和 Safari 的 UI 不同，浏览器也会有不一致的地方。我认为即使您这样做了，您也无法处理它，我认为这种努力是不值得的。而是使用 ul li 创建一个自定义选择选项，您可以很好地控制它。
是的，我已经阅读过这个问题，我只是假设有一个内置的解决方案...感谢您提出的解决方案，听起来它可能会工作

标签： css angularjs

【解决方案1】：

只需从选择元素的样式中移除宽度 (style="width: 180px")

见下面的片段：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Regular option", "Long option number 1", "Very very long option that doent mke sense"];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names">
</select>
</div>

<p>This example shows how to fill a dropdown list using the ng-options directive.</p>

</body>

【讨论】：

感谢您的回答，但我打算设置选择栏的宽度。我想要的是选项元素将匹配选择栏的宽度，而不是相反。