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

Question

实际上，我知道选择框的宽度是由列表中的最长选项设置的，但是我想增加选择html元素的长度（宽度）。 我也进行了搜索，并且我了解此代码style =“ max-width：70％”可能有效，但不适用于我。 下面的代码是我的：     选项1     选项2     选项3

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

无论选项的宽度如何，都必须使用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 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>