76

リストボックスがあり、その幅を減らしたいです。

これが私のコードです：

<select name="wgtmsr" id="wgtmsr" style="width: 50px;">
  <option value="kg">Kg</option>
  <option value="gm">Gm</option>
  <option value="pound">Pound</option>
  <option value="MetricTon">Metric ton</option>
  <option value="litre">Litre</option>
  <option value="ounce">Ounce</option>
</select>

このコードは IE 6 では機能しますが、Mozilla Firefox (最新バージョン) では機能しません。widthFirefox のドロップダウン リストを減らす方法を教えてください。

4

7 に答える 7

88

このコードを試してください：

<select name="wgtmsr" id="wgtmsr">
<option value="kg">Kg</option>
<option value="gm">Gm</option>
<option value="pound">Pound</option>
<option value="MetricTon">Metric ton</option>
<option value="litre">Litre</option>
<option value="ounce">Ounce</option>
</select>

CSS:

#wgtmsr{
 width:150px;   
}

オプションの幅を変更したい場合は、css でこれを行うことができます。

#wgtmsr option{
  width:150px;   
}

選択した幅をオーバーライドする css ルールに競合がある可能性があります

デモ

于 2012-12-18T11:11:34.427 に答える
10

ドロップダウンの幅自体は設定できません。幅はオプション値によって異なります。ここも参照してください（ jsfiddle.net/LgS3C/ ）

選択ボックスの外観は、ブラウザによっても異なります。

独自のコントロールを作成するか、Select2 https://select2.orgを使用できます。

于 2012-12-18T11:16:53.343 に答える
6

引数を試して!important、CSSが指定した他のスタイルと競合していないことを確認してください。また、独自のスタイルを追加する前に、 reset.cssを使用することをお勧めします。

select#wgmstr {
    max-width: 50px;
    min-width: 50px;
    width: 50px !important;
}

また

<select name="wgtmsr" id="wgtmsr" style="width: 50px !important; min-width: 50px; max-width: 50px;">
于 2012-12-18T11:13:10.313 に答える
5

style="width:50px;"CSS を作成し、CSSコードで値を設定します。ドロップダウン リストでCSSのクラスを呼び出します。それはうまくいくでしょう。

于 2012-12-18T11:09:58.800 に答える
2

ドロップダウンするリストの幅を制御する場合は、次のように実行できます。

CSS

#wgtmsr option {
    width: 50px;
}
于 2012-12-18T11:13:35.690 に答える