如何更改下拉列表的宽度？答案

【问题标题】：How can change width of dropdown list?如何更改下拉列表的宽度？
【发布时间】：2012-12-05 13:50:20
【问题描述】：

我有一个列表框，我想减小它的宽度。

这是我的代码：

<select name="wgtmsr" id="wgtmsr" style="width: 50px;">
  <option value="kg">Kg</option>
  <option value="gm">Gm</option>
  <option value="pound">Pound</option>
  <option value="MetricTon">Metric ton</option>
  <option value="litre">Litre</option>
  <option value="ounce">Ounce</option>
</select>

此代码适用于 IE 6，但不适用于 Mozilla Firefox（最新版本）。谁能告诉我如何减少 Firefox 下拉列表的width？

【问题讨论】：

它确实适用于 Firefox 17.0.1。
您的代码应该在所有浏览器上都能正常工作..
Set width of dropdown element in HTML select dropdown options的可能重复
为什么不根据内容的宽度改变宽度呢？ stackoverflow.com/questions/20091481/…

标签： html css list drop-down-menu html-select

【解决方案1】：

试试这个代码：

<select name="wgtmsr" id="wgtmsr">
<option value="kg">Kg</option>
<option value="gm">Gm</option>
<option value="pound">Pound</option>
<option value="MetricTon">Metric ton</option>
<option value="litre">Litre</option>
<option value="ounce">Ounce</option>
</select>

CSS：

#wgtmsr{
 width:150px;   
}

如果您想更改选项的宽度，可以在您的 css 中执行此操作：

#wgtmsr option{
  width:150px;   
}

也许你的 css 规则有冲突，覆盖了你的选择宽度

DEMO

【讨论】：

这与 OP 所拥有的有何不同？
内联 style 定义会覆盖所有其他样式（除非有 !important），所以我不这么认为。即使在 Firefox 17.0.1 上，OP 的原始代码也能正常工作。
@Abody97 也许他的 css 有冲突
非常感谢您的帮助。是的，选项宽度不起作用，但现在使用 #wgtmsr option{width:50px;} 它的工作（也通过使用类工作）。但在我将宽度样式放入每个选项标签以及选择标签之前，但这并没有不行。是的，可能是被覆盖了。
仅供参考，这似乎对 Chrome 或 IE11 没有任何影响，但是当 OP 要求为 Firefox 工作时，我正在寻找更通用的东西...... :(

【解决方案2】：

无法设置下拉菜单的宽度。它的宽度取决于选项值。另请参阅此处 (jsfiddle.net/LgS3C/)

选择框的外观还取决于您的浏览器。

您可以构建自己的控件或使用 Select2 https://select2.org

【讨论】：

【解决方案3】：

尝试!important 参数以确保CSS 不与您指定的任何其他样式冲突。在添加自己的样式之前，也可以使用reset.css。

select#wgmstr {
    max-width: 50px;
    min-width: 50px;
    width: 50px !important;
}

或

<select name="wgtmsr" id="wgtmsr" style="width: 50px !important; min-width: 50px; max-width: 50px;">

【讨论】：

你真的尝试过你的建议吗？如果你这样做了，你可能会注意到 OP 的原始代码已经可以工作了。
这就是为什么我建议他使用!important 参数来确保代码不会与其他样式冲突。
添加!important 是唯一对我有用的东西。我总是忘记它。

【解决方案4】：

这个：

<select style="width: XXXpx;">

XXX = 任意数字

在 Google Chrome v70.0.3538.110 中运行良好

【讨论】：

【解决方案5】：

创建一个css并在css代码中设置值style="width:50px;"。在下拉列表中调用 CSS 的类。然后就可以了。

【讨论】：

【解决方案6】：

如果你想控制下拉列表的宽度，可以如下进行。

CSS

#wgtmsr option {
    width: 50px;
}

【讨论】：

这似乎不起作用，至少在 Chrome 中不起作用。

【解决方案7】：

这对我有用：

ul.dropdown-menu > li {
    max-width: 144px;
}

在 Chromium 和 Firefox 中。

【讨论】：