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

Question

实际上我知道 select 框 width 是由列表中最长的选项设置的，但我想增加 select [=22] 的长度（宽度） =]元素.

我也搜索过，我知道这段代码 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

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

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

Answer 2

您应该使用 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 3

这对你有帮助。

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

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

How can I set the width of HTML <select> element, without considering the width of each option

html

html-select

dropdown