有什么方法可以使字段集的宽度只与其中的控件一样宽？

看来fieldset默认为容器的100％宽度。 有没有什么办法可以使字段设置与字段集中的最宽控制一样大？

Answer 1

使用display: inline-block ，尽pipe你需要把它包装在一个DIV中，以防止它实际显示在线。 在Safari浏览器中testing。

 <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

不幸的是，既不display:inline-block或width:0px在Internet Explorer中工作到版本8.我还没有尝试过Internet Explorer 9.就像我想忽略Internet Explorer，我不能。

在Firefox和Internet Explorer 8上运行的唯一选项是float:left 。 唯一的一个小缺点就是你必须记住要使用clear:both在表单后面的元素上。 当然，如果你忘记，这将是非常明显的;-)

Answer 5

你总是可以使用CSS来约束fieldset的宽度，这也会限制里面的控件。

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

Answer 6

这也适用。

 fieldset { width:0px; } 

Answer 7

我解决了我的问题覆盖传说风格如下

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

Answer 8

你也可以把这个字段放在一个表中，如下所示：

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

Answer 9

进一步的Mihai解决scheme，跨浏览器左alignment：

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

跨浏览器右alignment：

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

Answer 10

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