似乎fieldset默认为其容器的100%宽度。有什么方法可以使字段集与字段集中的最大控件一样大?
Answers:
使用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>
display: inline-block;
不适用于iE6和IE7。如果您不必关心它们,那将很高兴。:)
fieldset {display:inline}
要么 fieldset {display:inline-block}
如果要垂直分离两个字段集,请<br/>
在它们之间使用一个。从语义上讲这是正确的,并且没有比这困难的多。
这也有效。
fieldset {
width:0px;
}
您始终可以使用CSS约束字段集的宽度,这也将约束内部的控件。
我发现我经常不得不限制select
控件的宽度,否则很长的选项文本将使其完全无法管理。
fieldset {
min-width: 0;
max-width: 100%;
width: 100%;
}
我通过覆盖图例样式如下修复了我的问题
.ui-fieldset-legend
{
font-size: 1.2em;
font-weight: bold;
display: inline-block;
width: auto;`enter code here`
}
进一步了解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>
<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>