83

fieldset のデフォルトはコンテナの幅 100% に設定されているようです。フィールドセット内の最も幅の広いコントロールと同じ大きさのフィールドを設定する方法はありますか?

4

12 に答える 12

131

を使用display: inline-blockしますが、実際にインラインで表示されないように DIV 内にラップする必要があります。サファリでテスト済み。

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

2 つのフィールドセットを垂直に分離したい場合は、<br/>それらの間にシングルを使用します。これは意味的に正しく、必要以上に難しくありません。

于 2010-02-20T15:10:31.273 に答える
8

フロートすることもできますが、コンテンツと同じ幅しかありませんが、それらのフロートを確実にクリアする必要があります。

于 2010-02-20T14:49:11.510 に答える
1

残念ながら、バージョン 8 までの Internet Explorer ではどちら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 に答える
-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 に答える