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

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

这是我的密码：

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

公斤
转基因的
英镑
公吨
升
盎司

---

此代码适用于IE6，但不适用于Mozilla Firefox（最新版本）。有人能告诉我如何减少Firefox上下拉列表的宽度吗？

创建css并在css代码中设置值

style=“width:50px；”

。在下拉列表中调用CSS类。然后它就会工作。

尝试以下代码：

<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 option{
  width:150px;   
}

可能您的css规则中存在冲突，该冲突覆盖了您选择的宽度

---

试试

！重要的

参数，以确保CSS不会与您指定的任何其他样式冲突。另外，在添加自己的样式之前，最好使用

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

或

---

如果要控制下拉列表的宽度，可以按如下操作

CSS

#wgtmsr option {
    width: 50px;
}

---

无法设置下拉列表宽度本身。它的宽度取决于选项值。另请参见此处（jsfiddle.net/LgS3C/）

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

您可以构建自己的控件或使用Select2 这是：

XXX=任何数字

在Google Chrome v70.0.3538.110中效果很好这对我来说很有用：

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

---

在Chromium和Firefox中。

这与OP有什么不同？内联

样式

定义覆盖所有其他样式（除非有

！important

），所以我不这么认为。OP的原始代码即使在Firefox 17.0.1上也可以正常工作。@Abody97可能他的CST中有冲突。非常感谢您的帮助。是的，选项宽度不起作用，但是现在使用#wgtmr option{width:50px；}它起作用了（也通过使用类来起作用）。但是之前，我在每个选项标记和选择标记中都使用了宽度样式，但这不起作用。是的，可能是被覆盖了。仅供参考，这似乎对Chrome或IE11没有任何影响，但是当OP要求为Firefox工作时，我正在寻找更通用的东西…：（它在Firefox 17.0.1上可以正常工作。你的代码在所有浏览器上都应该可以正常工作。。可能会重复你为什么不根据内容的宽度更改宽度？你真的尝试了你的建议吗？如果尝试了，你可能会注意到OP的原始代码已经可以工作了。这就是为什么我建议他使用

！important

参数以确保代码与其他样式不冲突。添加

！important

是唯一对我有效的方法。我总是忘记它。这似乎不起作用，至少在Chrome中不起作用。

#wgtmsr option {
    width: 50px;
}

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