Как сделать отдельные элементы сжимаются до максимального значения ширины в полевом наборе

Когда я уменьшаю ширину окна моего браузера, 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 (в процентах) в пределах набора полей?

Примечание. Я тестировал как Firefox 12.0, так и Google Chrome. Теперь я уверен, что это проблема с несколькими браузерами.

Разъяснение. Обратитесь к к этому примеру и обратите внимание на разницу между поведением элемента select внутри a fieldset и другой вне fieldset. То, что я хочу достичь, состоит в том, что элемент select внутри fieldset ведет себя как тот, который находится вне элемента fieldset.

Ответ 1

Проблема

Это невозможно, по крайней мере, если вы используете только max-width (см. ниже решение). <select> всегда немного сложны в стиле, так как они элементы интерактивного контента и элементы управления формой. Таким образом, они должны следовать некоторым неявным правилам. Во-первых, при использовании max-width вы не можете сделать выбор менее широким, чем один из его вариантов. Подумайте о следующем сценарии:

+------------------------------------+-+
|Another entry                       |v|
+------------------------------------+-+
|Another entry                         |
|Select box, select anything, please   |
|Another entry                         |
|Another entry                         |
+------------------------------------+-+

Скажите, что вы хотите сжать это <select> - что произойдет? Ширина выбора станет меньше, пока...

+------------------------------------+-+   +-----------------------------------+-+
|Another entry                       |v|   |Another entry                      |v|
+------------------------------------+-+   +-----------------------------------+-+
|Another entry                         |   |Another entry                        | 
|Select box, select anything, please   |-->|Select box, select anything, please  | 
|Another entry                         |   |Another entry                        | 
|Another entry                         |   |Another entry                        | 
+------------------------------------+-+   +-----------------------------------+-+ 
                                                   |
           +---------------------------------------+
           v
+----------------------------------+-+   +---------------------------------+-+
|Another entry                     |v|   |Another entry                    |v|
+----------------------------------+-+   +---------------------------------+-+
|Another entry                       |   |Another entry                      | 
|Select box, select anything, please |-->|Select box, select anything, please| 
|Another entry                       |   |Another entry                      | 
|Another entry                       |   |Another entry                      | 
+----------------------------------+-+   +---------------------------------+-+

И тогда процесс остановится, так как <option> больше не подходит. Имейте в виду, что вы не можете стилить <option>s или, по крайней мере, немного (цвет, шрифт-вариант), не получая отвратительных причуд. Тем не менее, поле рамки можно изменить, если выбор подготовлен правильно:

Решение

Используйте значение 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 теперь корректно распознает width select и не заставит select иметь неявный min-width. Обратите внимание, что width абсурден, так как он больше, чем max-width. Большинство браузеров не заботятся и используют max-width в этом случае, поскольку он обеспечивает верхнюю границу.

JSFiddle Demo (работает в FF12, Chrome 18, IE9, Opera 11.60)

Изменить

Решение на основе Wrapper, это не изменит исходную ширину:

<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 Demo (работает в браузерах, перечисленных выше)

Ответ 2

Является этим, что вы ищете?

<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 как абсолютное значение. Процент берется из его родительского элемента. Таким образом, вы должны также дать процент от своего родителя.

Надеюсь, это поможет.

Ответ 3

Установите width в fieldset на 100% (или любое другое значение)

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

Протестировано в Google Chrome.

Ответ 4

попробовать:

fieldset select{
    margin:auto
}