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


80

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

Answers:


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的最明确答案,它解决了我的相同问题。谢谢。
Mawg说恢复Monica 2010年

是的,如果它适用于您关心的所有浏览器,那么这是比我的回答更好/更简单的想法。
汤姆(Tom)

3
仅供参考:display: inline-block;不适用于iE6和IE7。如果您不必关心它们,那将很高兴。:)
Diemo

在IE8和Firefox 10中效果很好!
Ed Bayiates'2

什么是div的伏都教。看来有必要,但是为什么呢?
superluminary

14

fieldset {display:inline} 要么 fieldset {display:inline-block}

如果要垂直分离两个字段集,请<br/>在它们之间使用一个。从语义上讲这是正确的,并且没有比这困难的多。


用于IE 11,显示:内联的工作,但不显示:内联块
加布Halsmer

8

您可以浮动它,然后它只会和它的内容一样宽,但是您必须确保清除这些浮动。


1

这也有效。 

fieldset {
  width:0px;
}

1
如果字段集中有多个元素应显示在同一行上,则此方法将无效。
马修·辛克尔

如果您使用block元素包装它们,或者将nowrap和显式中断组合使用,则可以。
dan.s.ward 2011年

1

不幸的是display:inline-blockwidth:0px在版本8或更高版本的Internet Explorer中都无法使用。我没有尝试过Internet Explorer9。我想忽略Internet Explorer,但我不能。

在Firefox和Internet Explorer 8上唯一可用的选项是float:left。唯一的小缺点是您必须记住clear:both在表格后面的元素上使用。当然,如果您忘记了,这将非常明显;-)


0

您始终可以使用CSS约束字段集的宽度,这也将约束内部的控件。

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


但我想让它动态,以便字段集将“自动调整大小”,而不是预定宽度
leora 2010年

0
 fieldset {

    min-width: 0;

    max-width: 100%;

    width: 100%;
 }

3
请添加一些说明
-Rarblack

甚至提姆·伯纳斯·李(Tim Berners-Lee)都不能告诉您为什么要这样做,但是狗屎就行了,谢谢!
lucasjohnson

0

试试这个

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

-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倍的代码。
superluminary

-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>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.