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

Question

Похоже, что fieldset по умолчанию равен 100% ширины своего контейнера. Есть ли какой-нибудь способ, которым вы можете задать набор полей размером с самый широкий элемент управления внутри набора полей?

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

Answer 2

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

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

Answer 3

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

Answer 4

 fieldset {

    min-width: 0;

    max-width: 100%;

    width: 100%;
 }

Answer 5

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

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

Answer 6

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

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

Answer 7

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

Answer 8

В продолжение решения 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>

Answer 9

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

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

Answer 10

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

fieldset {
  width:0px;
}