83

似乎字段集默认为其容器的 100% 宽度。有什么方法可以让字段集与字段集中最宽的控件一样大？

4

12 回答 12

131

使用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>
于 2010-02-20T14:47:17.377 回答
14

fieldset {display:inline}或者fieldset {display:inline-block}

如果要垂直分隔两个字段集，请<br/>在它们之间使用一个。这在语义上是正确的，并且不会比它必须的更难。

于 2010-02-20T15:10:31.273 回答
8

您可以浮动它，然后它的宽度将与其内容一样宽，但您必须确保清除这些浮动。

于 2010-02-20T14:49:11.510 回答
1

这也有效。 

fieldset {
  width:0px;
}
于 2011-06-08T13:25:09.740 回答
1

不幸的是，在 Internet Explorer 8 之前的版本中既不工作display:inline-block也不width:0px工作。我没有尝试过 Internet Explorer 9。尽管我很想忽略 Internet Explorer，但我不能。

唯一适用于 Firefox 和 Internet Explorer 8 的选项是float:left. 唯一的小缺点是您必须记住clear:both在表单后面的元素上使用。当然，如果您忘记了，那将非常明显；-)

于 2012-02-17T02:47:11.430 回答
0

您始终可以使用 CSS 来限制字段集的宽度，这也会限制内部的控件。

我发现我经常不得不限制select控件的宽度，否则很长的选项文本会使其完全无法管理。

于 2010-02-20T14:42:00.877 回答
0 
 fieldset {

    min-width: 0;

    max-width: 100%;

    width: 100%;
 }
于 2018-12-05T04:59:38.097 回答
0

试试这个

<fieldset>
   <legend style="max-width: max-content;" >Blah</legend>
</fieldset>
于 2019-07-30T05:37:10.010 回答
-1

我通过覆盖图例样式解决了我的问题，如下所示

.ui-fieldset-legend
{
  font-size: 1.2em;
  font-weight: bold;
  display: inline-block;
  width: auto;`enter code here`
}
于 2017-10-12T08:34:49.947 回答
-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>
于 2013-12-20T17:20:01.470 回答
-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>
于 2013-12-31T14:09:42.883 回答
-3

您还可以将字段集放在表中，如下所示：

<table>
    <tr>
       <td>
           <fieldset>
           .......
           </fieldset>
       </td>
    </tr>
</table>
于 2013-10-21T08:50:26.480 回答