Gibt es eine Möglichkeit, eine Fieldset-Breite nur so breit wie die Steuerelemente darin zu haben?

Es scheint, dass das Feldset standardmäßig auf 100 % der Breite seines Containers eingestellt ist. Gibt es eine Möglichkeit, dass der Feldsatz genau so groß ist wie das breiteste Steuerelement innerhalb des Feldsatzes?

Benutzen display: inline-blockobwohl Sie es in ein DIV einschließen müssen, damit es nicht tatsächlich inline angezeigt wird. Getestet in Safari.

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

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

Wenn Sie zwei Fieldsets vertikal trennen möchten, verwenden Sie ein einzelnes <br/> zwischen ihnen. Das ist semantisch korrekt und nicht schwieriger als es sein muss.

Sie könnten es schweben lassen, dann ist es nur so breit wie sein Inhalt, aber Sie müssen sicherstellen, dass Sie diese schweben.

Dies funktioniert auch.

fieldset {
  width:0px;
}

Leider auch nicht display:inline-block Noch width:0px funktioniert im Internet Explorer bis Version 8. Ich habe Internet Explorer 9 nicht ausprobiert. So sehr ich Internet Explorer ignorieren möchte, kann ich es nicht.

Die einzige Option, die unter Firefox und Internet Explorer 8 funktioniert, ist float:left. Der einzige kleine Nachteil ist, dass Sie daran denken müssen, zu verwenden clear:both auf dem Element, das dem Formular folgt. Natürlich wird es sehr offensichtlich, wenn Sie es vergessen 😉

Sie können immer CSS verwenden, um die Breite des Fieldsets einzuschränken, was auch die Steuerelemente darin einschränken würde.

Ich finde, dass ich oft die Breite von einschränken muss select Steuerelemente, oder sehr langer Optionstext macht es völlig unhandlich.

 fieldset {

    min-width: 0;

    max-width: 100%;

    width: 100%;
 }