38

ブラウザウィンドウの幅を小さくすると、次のコマンドを実行しても、select内の要素のfieldsetサイズが小さくなりません。max-width

<fieldset style="background:blue;">
<select name=countries style="max-width:90%;">
 <option value=gs>South Georgia and the South Sandwich Islands</option>
</select>
</fieldset>

ただし、これはfieldset要素の外側で完全に機能します。要素をフィールドセット内の（パーセンテージ）にselect縮小するにはどうすればよいですか？max-width

注： Firefox12.0とGoogleChromeの両方をテストしました。私は今、それがクロスブラウザの問題であると確信しています。

明確化：この例を参照して、aのselect内側の要素fieldsetとの外側の要素の動作の違いに注意してくださいfieldset。私が達成したいのは、select内の要素が要素fieldsetの外のfieldset要素のように動作することです。

4

5 に答える 5

73

問題

少なくとも使用するだけの場合、これは不可能ですmax-width（解決策については以下を参照）。s はインタラクティブなコンテンツ要素であり、フォーム コントロール要素であるため、スタイルを<select>設定するのは常に少し難しいです。そのため、いくつかの暗黙のルールに従う必要があります。1 つには、 を使用する場合、選択範囲をそのオプションの 1 つより狭くすることはできません。次のシナリオを考えてみてください。 max-width

+------------------------------------+-+
|別のエントリ |v|
+------------------------------------+-+
|別のエントリ |
|ボックスを選択してください。何でも選択してください |
|別のエントリ |
|別のエントリ |
+------------------------------------+-+

これを絞りたいとしましょう<select>- どうなりますか? 選択の幅が狭くなるまで...

+------------------------------------+-+ +--------------------- --------------------------+-+
|別のエントリ |v| |別のエントリ |v|
+------------------------------------+-+ +--------------------- --------------------------+-+
|別のエントリ | |別のエントリ |
|ボックスを選択してください、何でも選択してください |-->|ボックスを選択して、何でも選択してください |
|別のエントリ | |別のエントリ |
|別のエントリ | |別のエントリ |
+------------------------------------+-+ +--------------------- --------------------------+-+
                                                   | |
           +-----------------------------------------------------+
           v
+------------------------------------+-+ +----------------------- ----------------------+-+
|別のエントリ |v| |別のエントリ |v|
+------------------------------------+-+ +----------------------- ----------------------+-+
|別のエントリ | |別のエントリ |
|ボックスを選択してください。何でも選択してください |-->|ボックスを選択して、何でも選択してください|
|別のエントリ | |別のエントリ |
|別のエントリ | |別のエントリ |
+------------------------------------+-+ +----------------------- ----------------------+-+

そして、<option>s が収まらなくなるため、プロセスは停止します。厄介なクセを得ることなく、スタイルを設定することはできないこと、<option>sまたは少なくとも少しだけ (色、フォントのバリエーション) を設定することはできないことに注意してください。ただし、select が正しく準備されていれば、border-box を変更できます。

ソリューション

widthの値を使用しますselect。はい、次のように簡単です。

<fieldset style="background:blue;">
 <select name=countries style="width:100%;max-width:90%;">
  <option value=gs>South Georgia and the South Sandwich Islands</option>
 </select>
</fieldset>

なぜこれが機能するのですか？は の を正しく認識し、 に暗黙的な を強制しないoptionためです。は以上であるため、ばかげていることに注意してください。ほとんどのブラウザは、上限を提供するため、この場合は気にせず使用しません。widthselectselectmin-widthwidthmax-widthmax-width

JSFiddle デモ(FF12、Chrome 18、IE9、Opera 11.60 で動作)

編集

ラッパーベースのソリューション、これは元の幅を変更しません:

<fieldset style="background:blue;">
<div style="display:inline-block;max-width:90%;"> <!-- additional wrapper -->
 <select name=countries style="width:100%">
  <option value=gs>South Georgia and the South Sandwich Islands</option>
 </select>
</div>
</fieldset>

JSFiddle デモ(上記のブラウザーで動作)

于 2012-05-29T08:04:38.647 に答える
3

これはあなたが探しているものですか？

<fieldset style="background:blue; display:inline; width:100%;">
  <select name=countries style="width:90%;">
    <option value=gs>South Georgia and the South Sandwich Islands</option>
  </select>

  <input name=others style="display:block; min-width:300px; width:90%;">
</fieldset>

いずれにしても、値 (300px など) で幅を指定すると、この高さが優先され、要素自体に 300px が割り当てられます。widthをパーセンテージで定義しmin-width、絶対値として与えます。パーセンテージは、その親要素から取得されます。したがって、その親にもパーセンテージを与える必要があります。

これが役立つことを願っています。

于 2012-05-20T11:23:47.753 に答える
0

widthのfieldsetを100%(またはその他の値)に設定します。

http://jsfiddle.net/e2H82/3/

Google Chrome でテスト済み。

于 2012-05-31T17:39:35.023 に答える
-4

試す：

fieldset select{
    margin:auto
}

于 2016-04-06T09:27:27.637 に答える