Чи є спосіб, щоб ширина набору полів була такою широкою, як елементи керування в них?


80

Здається, набір полів за замовчуванням становить 100% ширини свого контейнера. Чи є спосіб, за допомогою якого набір полів може бути таким великим, як найширший елемент управління всередині набору полів?

Відповіді:


128

Використовуйте display: inline-block, хоча вам потрібно загорнути його всередину DIV, щоб він фактично не відображався вбудованим. Перевірено в Safari.

<style type="text/css">
    .fieldset-auto-width {
         display: inline-block;
    }
</style>
<div>
  <fieldset class="fieldset-auto-width">
      <legend>Blah</legend>
      ...
  </fieldset>
</div>

4
Це була найбільш чітка відповідь для відносного n00b, і це вирішило мою ідентичну проблему. Дякую.
Моуг каже відновити Моніку

Так, це краща / простіша ідея, ніж моя відповідь, якщо вона працює у всіх браузерах, які вас цікавлять.
Том,

3
FYI: display: inline-block;не працює в iE6 та IE7. Щасливі, якщо вам не доведеться про них дбати. :)
Diemo

Чудово працює в IE8 та Firefox 10!
Ед Байятес,

Що таке вуду з div. Це видається необхідним, але чому?
надсвітлий

14

fieldset {display:inline} або fieldset {display:inline-block}

Якщо ви хочете розділити два набори полів вертикально, використовуйте один <br/>між ними. Це семантично правильно і не складніше, ніж повинно бути.


для IE 11, дисплей: вбудований спрацьовував, але не дисплей: вбудований блок
Гейб Халсмер,

8

Ви можете розмістити його, тоді воно буде лише таким широким, як його вміст, але вам доведеться обов’язково очистити ці поплавки.


1

Це також працює. 

fieldset {
  width:0px;
}

1
Це не працює, якщо в наборі полів є кілька елементів, які повинні відображатися в одному рядку.
Matthew Schinckel

Звичайно, це так, якщо ви використовуєте елемент блоку для їх обгортання або комбінацію атрибута outrap та явних розривів.
dan.s.ward

1

На жаль, ані display:inline-blockне width:0pxпрацює в Internet Explorer до версії 8. Я не пробував Internet Explorer 9. Як би я не хотів ігнорувати Internet Explorer, я не можу.

Єдиний варіант, який працює у Firefox та Internet Explorer 8 - це float:left. Єдиним незначним недоліком є ​​те, що ви повинні пам’ятати про використання clear:bothелемента, що йде за формою. Звичайно, це буде дуже очевидно, якщо ви забудете ;-)


0

Ви завжди можете використовувати CSS для обмеження ширини набору полів, що також обмежує елементи управління всередині.

Я виявляю, що мені часто доводиться обмежувати ширину selectелементів керування, інакше дуже довгий текст опцій зробить його абсолютно некерованим.


але я хочу, щоб він був динамічним, щоб набір полів "автоматично змінювався", а не був заданою шириною
leora

0
 fieldset {

    min-width: 0;

    max-width: 100%;

    width: 100%;
 }

3
Будь ласка, додайте кілька пояснень
Rarblack,

Навіть Тім Бернерс-Лі не міг сказати вам, чому ця робота, але лайно просто працює, хай дякую!
lucasjohnson


-1

я виправив свою проблему, замінивши стиль легенди як нижче

.ui-fieldset-legend
{
  font-size: 1.2em;
  font-weight: bold;
  display: inline-block;
  width: auto;`enter code here`
}

-2

Йдучи далі від рішення Mihai, перехресний браузер вирівнюється за лівим краєм:

<TABLE>
  <TR>
    <TD>
      <FORM>
        <FIELDSET>
          ...
        </FIELDSET>
      </FORM>
    </TD>
  </TR>
</TABLE>

Крос-браузер вирівняний по правому краю:

<TABLE>
  <TR>
    <TD WIDTH=100%></TD>
    <TD>
      <FORM>
        <FIELDSET>
          ...
        </FIELDSET>
      </FORM>
    </TD>
  </TR>
</TABLE>

2
У той час як це може працювати, таблиці зазвичай не вважається хорошою практикою для макетів ... stackoverflow.com/questions/83073 / ...
StackExchange Що клямка

1
уявіть собі, що робите це для 5 наборів полів? 10? 15 ??! не роби цього!
Тейлор Браун

1
Для будь-яких нових розробників, які приїжджають сюди. Не роби цього. Ви будете використовувати в 10 разів більше коду, ніж вам потрібно.
надсвітлий

-2
            <table style="position: relative; top: -0px; left: 0px;">
                <tr>
                    <td>
                        <div>   
                            <fieldset style="width:0px">
                                <legend>A legend</legend>
                                <br/>
                                <table cellspacing="0" align="left">
                                    <tbody>
                                        <tr>
                                            <td align='left' style="white-space: nowrap;">
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </fieldset>
                        </div>
                    </td>
                </tr>
            </table>

-3

Ви також можете помістити набір полів всередину таблиці, наприклад:

<table>
    <tr>
       <td>
           <fieldset>
           .......
           </fieldset>
       </td>
    </tr>
</table>
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.