Есть ли способ иметь ширину набора полей только так же широко, как и элементы управления в них?

Ответ 1

Используйте 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>

Ответ 2

fieldset {display:inline} или fieldset {display:inline-block}

Если вы хотите отделить два поля по вертикали, используйте один <br/> между ними. Это семантически корректно и не сложнее, чем должно быть.

Ответ 3

Вы можете его плавать, тогда он будет только таким же широким, как и его содержимое, но вам нужно будет очистить эти поплавки.

Ответ 4

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

Единственный вариант, который работает в Firefox и Internet Explorer 8, - float:left. Единственный слабый недостаток заключается в том, что вы должны помнить, чтобы использовать clear:both для элемента, который следует за формой. Конечно, это будет очень очевидно, если вы забудете; -)

Ответ 5

 fieldset {

    min-width: 0;

    max-width: 100%;

    width: 100%;
 }

Ответ 6

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

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

Ответ 7

Это также работает.  

fieldset {
  width:0px;
}

Ответ 8

попробуйте это

<fieldset>
   <legend style="max-width: max-content;" >Blah</legend>
</fieldset>

Ответ 9

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

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

Ответ 10

Дальнейшее решение 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>

Ответ 11

            <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>

Ответ 12

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

<table>
    <tr>
       <td>
           <fieldset>
           .......
           </fieldset>
       </td>
    </tr>
</table>