Html 如何更改下拉列表的宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13931571/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can change width of dropdown list?
提问by user1844626
I have a listbox and I want to decrease its width.
我有一个列表框，我想减小它的宽度。
Here is my code:
这是我的代码：
<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>
This code works on IE 6 but not in Mozilla Firefox (latest version). Can anybody please tell me how I can decrease the widthof the dropdown list on Firefox?
此代码适用于 IE 6，但不适用于 Mozilla Firefox（最新版本）。谁能告诉我如何减少widthFirefox 上的下拉列表？
回答by Alessandro Minoccheri
Try this code:
试试这个代码：
<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:
CSS：
#wgtmsr{
width:150px;
}
If you want to change the width of the option you can do this in your css:
如果要更改选项的宽度，可以在 css 中执行此操作：
#wgtmsr option{
width:150px;
}
Maybe you have a conflict in your css rules that override the width of your select
也许您的 css 规则存在冲突，覆盖了您选择的宽度
回答by algorhythm
The dropdown width itself cannot be set. It's width depend on the option-values. See also here ( jsfiddle.net/LgS3C/ )
不能设置下拉宽度本身。它的宽度取决于选项值。另见此处（jsfiddle.net/LgS3C/）
How the select box looks like is also depending on your browser.
选择框的外观也取决于您的浏览器。
You can build your own control or use Select2 https://select2.org
您可以构建自己的控件或使用 Select2 https://select2.org
回答by Shadow in the Dark
This:
这个：
<select style="width: XXXpx;">
<select style="width: XXXpx;">
XXX = Any Number
XXX = 任何数字
Works great in Google Chrome v70.0.3538.110
在 Google Chrome v70.0.3538.110 中运行良好
回答by Amyth
try the !importantargument to make sure the CSS is not conflicting with any other styles you have specified. Also using a reset.cssis good before you add your own styles.
尝试!important参数以确保 CSS 不与您指定的任何其他样式冲突。在添加自己的样式之前，使用reset.css也很好。
select#wgmstr {
max-width: 50px;
min-width: 50px;
width: 50px !important;
}
or
或者
<select name="wgtmsr" id="wgtmsr" style="width: 50px !important; min-width: 50px; max-width: 50px;">
回答by Vishal Bharti
Create a css and set the value style="width:50px;"in csscode. Call the class of CSSin the drop down list. Then it will work.
创建一个 css 并style="width:50px;"在css代码中设置值。在下拉列表中调用CSS的类。然后它会起作用。
回答by techfoobar
If you want to control the width of the list that drops down, you can do it as follows.
如果要控制下拉列表的宽度，可以按如下方式进行。
CSS
CSS
#wgtmsr option {
width: 50px;
}
回答by Wilbert
This worked for me:
这对我有用：
ul.dropdown-menu > li {
max-width: 144px;
}
in Chromium and Firefox.
在 Chromium 和 Firefox 中。
