web-dev-qa-db-ja.com

フィールドセットの幅をコントロール内の幅だけにする方法はありますか？

Fieldsetのデフォルトは、コンテナの幅の100％のようです。フィールドセット内の最も広いコントロールと同じくらい大きいフィールドセットを持つことができる方法はありますか？

htmlcssfieldset
75
leora

つかいます 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>
119
tvanfosson

fieldset {display:inline} または fieldset {display:inline-block}

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

14
user164226

あなたはそれをフロートさせることができ、それはその内容と同じ幅になりますが、あなたはそれらのフロートをクリアすることを確認する必要があります。

8
Tom
 fieldset {

    min-width: 0;

    max-width: 100%;

    width: 100%;
 }
1
Trupti

残念ながら、どちらもdisplay:inline-block nor width:0pxバージョン8までのInternet Explorerで動作します。InternetExplorer 9を試したことはありませんが、Internet Explorerを無視したいので、できません。

FirefoxおよびInternet Explorer 8で機能する唯一のオプションはfloat:left。唯一のわずかな欠点は、clear:bothは、フォームに続く要素上。もちろん、忘れた場合は非常に明白です;-)

1
Paul D

これも機能します。

fieldset {
  width:0px;
}
0
dan.s.ward

これを試してください

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

いつでもCSSを使用してフィールドセットの幅を制限できます。これにより、内部のコントロールも制限されます。

selectコントロールの幅を制限しなければならないことがよくあります。そうしないと、オプションテキストが非常に長くなり、完全に管理できなくなります。

0
Jonathan Julian