web-dev-qa-db-fra.com

Existe-t-il un moyen de faire en sorte que la largeur d'un ensemble de champs soit aussi large que les contrôles qu'il contient?

Il semble que fieldset utilise par défaut 100% de la largeur de son conteneur. Est-il possible que l'ensemble de champs soit aussi grand que le contrôle le plus large dans l'ensemble de champs?

htmlcssfieldset
72
leora

Utilisez display: inline-block, bien que vous deviez l'envelopper dans une DIV pour l'empêcher de s'afficher réellement. Testé dans Safari.

<style type="text/css">
    .fieldset-auto-width {
         display: inline-block;
    }
</style>
<div>
  <fieldset class="fieldset-auto-width">
      <legend>Blah</legend>
      ...
  </fieldset>
</div>
118
tvanfosson

fieldset {display:inline} ou fieldset {display:inline-block}

Si vous souhaitez séparer deux champs de manière verticale, utilisez un seul <br/> entre eux. Ceci est sémantiquement correct et pas plus difficile que cela ne doit être.

14
user164226

Vous pouvez le faire flotter, alors il sera seulement aussi large que son contenu, mais vous devrez vous assurer que vous effacez ces flotteurs.

8
Tom

Malheureusement, ni display:inline-block ni width:0px ne fonctionne dans Internet Explorer jusqu'à la version 8. Je n'ai pas essayé Internet Explorer 9. Je ne peux pas ignorer Internet Explorer. 

La seule option qui fonctionne sur Firefox et Internet Explorer 8 est float:left. Le seul petit inconvénient est que vous devez vous rappeler d'utiliser clear:both sur l'élément qui suit le formulaire. Bien sûr, ce sera très évident si vous oubliez ;-)

1
Paul D

Cela fonctionne aussi.

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

essayez ceci

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

Vous pouvez toujours utiliser CSS pour contraindre la largeur de l'ensembles de champs, ce qui limitera également les contrôles à l'intérieur.

Je trouve que je dois souvent limiter la largeur des contrôles select, sinon un texte d'option très long le rendra totalement ingérable.

0
Jonathan Julian
 fieldset {

    min-width: 0;

    max-width: 100%;

    width: 100%;
 }
0
Trupti