如何设置HTML <select>元素的宽度,而不考虑每个选项的宽度

Question

实际上我知道选择框width是由列表中最长的选项设置的,但我想增加selecthtml元素的长度(宽度).

我也搜索过,我理解这段代码style="max-width:70%"可能有用,但它对我不起作用.

我的代码是我的:

<select class="form-control"style="max-width:70%">
    <option value="1">option 1 </option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
</select>

Answer 1

你应该使用width属性而不是max-width.将您的代码更正为以下示例:

<select class="form-control"style="width:150px">
    <option value="1">option 1 </option>
    <option value="2">option 2sdsdsdsd</option>
    <option value="3">option 3</option>
</select>

Answer 2

min-width无论选项的宽度如何，您都必须使用 css 属性来增加下拉列表的宽度。

html：

<select class="dropdown">
    <option value="1">option 1 </option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
</select>

css：

.dropdown{
  min-width: 200px;
}