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

【问题标题】：How can I set the width of HTML <select> element, without considering the width of each option如何设置 HTML <select> 元素的宽度，而不考虑每个选项的宽度
【发布时间】：2019-04-01 13:23:22
【问题描述】：

其实我知道选择框width是由列表中最长的选项设置的，但我想增加select html元素的长度（宽度）。

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

【问题讨论】：

标签： html html-select dropdown

【解决方案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>

【讨论】：

【解决方案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;
}

【讨论】：

这是，imo，一个更好的解决方案；其他人将触发overflow-y 行为。
关注点分离——将样式信息保存在样式表中——也比内联样式属性好得多。

【解决方案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>

【讨论】：

作为新用户感谢您的贡献。但是请注意，您的答案与 Sheida 的重复，我敢肯定您在发布答案时没有看到。此外，您的回答缺乏细节。其他人必须解析代码块中的 HTML 并将其与问题中的 HTML 进行比较以理解您的意思。提供解决方案的文本描述而不仅仅是代码会更有帮助。通过几个指向相关文档的链接会更好。如果您牢记这一点，您将提供更有价值的答案。