Question

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

这是我的代码：

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

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

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

您可以构建自己的控件或使用Select2 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并在 css 代码中设置值style="width:50px;"。在下拉列表中调用 CSS 类。然后它会工作。

Answer 5

此：

<select style="width: XXXpx;">

XXX =任何数字

在Google Chrome v70.0.3538.110中表现出色

Answer 6

如果您想控制列表的下拉宽度，您可以按照以下步骤操作。

<强> CSS

#wgtmsr option {
    width: 50px;
}

Answer 7

这对我有用：

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

在Chromium和Firefox中。

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

7 个答案: