收縮寬度選擇，多個框

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>