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

实际上我知道选择框

width

是由列表中最长的选项设置的，但是我想增加

select

html元素的长度（宽度）

我也搜索过了，我知道这个代码可能有效，但对我来说不起作用

下面的代码是我的：

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

选择1
选择2
选择3

无论选项的宽度如何，都必须使用css属性

最小宽度

来增加下拉列表的宽度

html:

---

您应该使用

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>

选择1
选项2SD
选择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>

选择1
选项2SD
选择3

作为新用户，感谢您的贡献。但是请注意，您的答案是Sheida的副本，我相信您在发布答案时没有看到。此外，你的回答缺乏细节。其他人必须解析代码块中的HTML，并将其与问题中的HTML进行比较，以理解您的意思。提供解决方案的文本描述而不仅仅是代码将更有帮助。如果有相关文档的链接就更好了。如果你牢记这一点，你将提供更多有价值的答案；其他的将触发溢出行为。分离关注点将样式信息保留在样式表中也比内联样式属性好得多。

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

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