有没有办法修复下拉列表的宽度？

Question

这是我得到的：

<select id="box1">
   <option>ABCDEFG</option>
</select>  

<select id="box2">
   <option>ABCDEFGHIJKLMNO</option>
</select>

我有2个不同的下拉列表。由于下拉列表的宽度取决于选项中最长文本的宽度，因此最终得到2个具有2个不同宽度的下拉列表。这使我的网页看起来很傻。

我想要的是设置它以便我的两个下拉列表都具有相同的宽度（我更喜欢宽度非常长，所以即使最长的项目也不会被截断）。

Answer 1

长度指的是可见的选项数量？如果是这种情况，请使用size。这是documentation。如果你的意思不同，请告诉我。

编辑后： 设置选择的宽度。但是设置宽度以仅显示特定长度是很困难的。 第二次编辑： 你不能使用CSS，你必须使用JavaScript。在选择的每次更改时，您必须看到两个元素中的哪一个具有最大宽度并将其设置为相同。

Answer 2

使用以下行。它将修复下拉列表的宽度。

<select id='box1' style='width: 200px;'>

<select id='box2' style='width: 200px;'> 

如果要使用css提及宽度，可以使用以下代码。

#container select {
    width: 150px;
}

Answer 3

您可以使用CSS设置<select>元素的宽度，但要使宽度与指定数量的字符完全匹配将很困难。

为什么要剪切选项的文字？

Answer 4

您需要在页面加载后使用JavaScript（提供列表id="listA"）：

document.getElementById('listA').length = 20

这将有效地将其截断为20个项目。