Здається, набір полів за замовчуванням становить 100% ширини свого контейнера. Чи є спосіб, за допомогою якого набір полів може бути таким великим, як найширший елемент управління всередині набору полів?
Відповіді:
Використовуйте 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;
}
На жаль, ані display:inline-block
не width:0px
працює в Internet Explorer до версії 8. Я не пробував Internet Explorer 9. Як би я не хотів ігнорувати Internet Explorer, я не можу.
Єдиний варіант, який працює у Firefox та Internet Explorer 8 - це float:left
. Єдиним незначним недоліком є те, що ви повинні пам’ятати про використання clear:both
елемента, що йде за формою. Звичайно, це буде дуже очевидно, якщо ви забудете ;-)
Ви завжди можете використовувати CSS для обмеження ширини набору полів, що також обмежує елементи управління всередині.
Я виявляю, що мені часто доводиться обмежувати ширину select
елементів керування, інакше дуже довгий текст опцій зробить його абсолютно некерованим.
fieldset {
min-width: 0;
max-width: 100%;
width: 100%;
}
спробуйте це
<fieldset>
<legend style="max-width: max-content;" >Blah</legend>
</fieldset>
я виправив свою проблему, замінивши стиль легенди як нижче
.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>