42

私は国のリストを持っていますが、いくつかは非常に長い名前です:

<select name=countries>
 <option value=af>Afghanistan</option>
 <option value=ax>Åland Islands</option>
 ...
 <option value=gs>South Georgia and the South Sandwich Islands</option>
 ...
</select>

デフォルトでは、選択ボックスはリスト内の最長のオプションと同じ長さになります。幅の広いブラウザー ウィンドウから表示したときにデフォルトの動作を示し、幅の狭いブラウザー ウィンドウから表示したときにコンテナーの幅の 90% にうまく収まるように選択ボックスを作成したいと考えています。これは、最も長いオプションの長さよりも小さくなります。

試してみmin-width: 90%;ましたが、うまくいきませんでした。これはCSSスタイリングだけで行うことができますか?

4

3 に答える 3

47

使用するstyle="max-width:90%;" 

<select name=countries  style="max-width:90%;">
 <option value=af>Afghanistan</option>
 <option value=ax>Åland Islands</option>
 ...
 <option value=gs>South Georgia and the South Sandwich Islands</option>
 ...
</select>

ライブデモ

于 2012-05-20T07:42:39.233 に答える
8

あなたは単にそれを逆に持っています。最小幅を指定すると、選択メニューは常に少なくともその幅になるため、ウィンドウサイズに関係なく、少なくとも最長オプションのサイズでも、90％まで拡大し続けます。

max-width代わりに使用する必要があります。このようにすると、選択メニューが最長のオプションに拡張されますが、設定した最大幅の90％を超えて拡張する場合は、その幅に縮小します。

于 2012-05-20T07:56:24.427 に答える