Question

多重选择框中的一个项目比其他项目长得多，是否有办法破解它以使其宽度变小

<select size="1">
<option>item</option>
<option>item</option>
<option>item is really long</option>
<option>item</option>
</select>

Answer 1

您可以使用CSS进行此操作，无论是内联样式还是使用类。

采用内嵌式：

<select style="width: 50px;">
 <option>item</option>
 <option>item</option>
 <option>item is really long</option>
 <option>item</option>
</select>

使用课程：

<select class="narrow">
 <option>item</option>
 <option>item</option>
 <option>item is really long</option>
 <option>item</option>
</select>

在CSS文件或嵌入式样式表中：

.narrow {
 width: 50px;
}

当然，将50px更改为您需要的任何宽度。

Answer 2

您可以使用CSS设置宽度。如果您向select标记添加一个类，例如'foo'，则可以添加css：

select.foo {
   width: 200px;
}

如果你想使用内联样式（不推荐）：

<select style="width: 200px";>
  <option>...
</select>

Answer 3

试试这个，适用于FireFox但不适用于IE：

<STYLE type="text/css">
  OPTION.shorter{ font-size:8px;}
</STYLE>

<select size="1">
<option>item</option>
<option>item</option>
<option class="shorter">item is really long</option>
<option>item</option>
</select>

收缩宽度选择，多个框

3 个答案: