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

【问题标题】：Is there a way to fix the width of drop down list?有没有办法修复下拉列表的宽度？
【发布时间】：2012-09-21 04:07:20
【问题描述】：

这是我得到的：

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

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

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

我想要设置它，以便我的两个下拉列表具有相同的宽度（我希望宽度非常长，这样即使最长的项目也不会被截断）。

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

使用以下行。它将固定下拉列表的宽度。

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

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

如果你想用css提到宽度，你可以使用下面的代码。

#container select {
    width: 150px;
}

【讨论】：

【解决方案3】：

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

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

【讨论】：

简单有效。谢谢。
啊，明白了。是的，解决方案是将它们都设置为非常宽的宽度。一些浏览器甚至会很聪明，允许展开状态（即实际下降的位）比您设置的宽度更宽，这样就不会剪切任何文本，同时在不展开时保持元素相同的宽度。

【解决方案4】：

你需要在页面加载后使用 JavaScript（给你的列表id="listA"）：

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

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

【讨论】：