如何改变下拉列表的宽度？ [英] How can change width of dropdown list?

问题描述

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

I have a listbox and I want to decrease its width.

这里是我的代码：

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

This code works on IE 6 but not in Mozilla Firefox (latest version). Can anybody please tell me how I can decrease the width of the dropdown list on Firefox?

推荐答案

尝试此代码：

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

If you want to change the width of the option you can do this in your css:

#wgtmsr option{
  width:150px;   
}

也许你的CSS规则有冲突，

Maybe you have a conflict in your css rules that override the width of your select

DEMO

这篇关于如何改变下拉列表的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！