有没有一种方法可以固定下拉列表的宽度？

Question

以下是我得到的：

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

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

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

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

- Thang Pham

---

请编辑并删除“长度”一词。如果您的意思是宽度，请说出宽度。如果您正在谈论显示的选项数量，请重新完整地重述问题。 - rjmunro

已解决。对造成的混淆感到抱歉。 - Thang Pham

没问题 —— 这就是 Stack Overflow 是一个维基的一部分，以便所有内容都可以得到改进的原因。 - Paul D. Waite

Answer 1

长度是指可见选项的数量吗？如果是这样，请使用 size。这里是文档。如果您有不同意见，请告诉我。

编辑后： 设置选择器的宽度。但是，很难设置宽度以仅显示特定长度。 第二次编辑： 您无法使用CSS来实现此操作，必须使用JavaScript。在每次更改选择器时，您必须查看哪个元素具有最大宽度，并将其设置为另一个元素的宽度。

- Teja Kantamneni

---

只需更新我的帖子...很抱歉之前表述不清。我想截断1个选项的长度，而不是下拉列表中选项的数量。 - Thang Pham

我能不能把宽度设置得很长，这样我就不用担心哪个元素更长了？ - Thang Pham

你也可以这样做。但是当值很小的时候，它们可能看起来不太好看。 - Teja Kantamneni

Answer 2

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

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

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

如果您想使用CSS提及宽度，可以使用以下代码。

#container select {
    width: 150px;
}

- rekha_sri

---

是的，那就是答案。非常感谢，但是既然 Paul D Waite 先回答了，我必须要给他功劳。 :) - Thang Pham

Answer 3

你可以使用CSS来设置<select>元素的宽度，但是很难精确地匹配给定数量的字符宽度。

为什么要裁剪选项文本呢？

- Paul D. Waite

---

简单而有效。谢谢。 - Thang Pham

啊，明白了。是的，解决方案是将它们都设置为非常宽的宽度。一些浏览器甚至会聪明地允许扩展状态（即实际下拉的部分）比您设置的宽度更宽，以便不裁剪任何文本，同时在未展开时保持元素相同的宽度。 - Paul D. Waite

Answer 4

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

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

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

- Diodeus - James MacFarlane

---

你完全不需要使用Javascript。此外，长度是SELECT中选项的数量，而不是显示的选项数量。 - Dancrumb