如何改变下拉列表的宽度是多少？(How can change width of dropdown l

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

这里是我的代码：

<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（最新版本）。 有人能告诉我怎样才能减少width在Firefox下拉列表的？

Answer 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

Answer 2:

下拉宽度本身不能设置。 它的宽度取决于选项值。 另请参见这里（jsfiddle.net/LgS3C/）

如何选择框看起来还取决于您的浏览器。

你可以建立自己的控制或使用选择二https://select2.org

Answer 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;">

Answer 4:

创建一个CSS并将该值设置style="width:50px;" 在CSS代码。 调用类CSS的下拉列表。 然后，它会奏效。

Answer 5:

这个：

<select style="width: XXXpx;">

XXX =任意数量

谷歌浏览器v70.0.3538.110伟大工程

Answer 6:

如果你想控制下拉列表的宽度，可以如下做到这一点。

CSS

#wgtmsr option {
    width: 50px;
}

Answer 7:

这为我工作：

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

在铬和Firefox。

文章来源: How can change width of dropdown list?