Gibt es eine Möglichkeit, dass eine Feldsatzbreite nur so breit ist wie die darin enthaltenen Steuerelemente?

80

Es scheint, dass die Feldmenge standardmäßig 100% der Breite ihres Containers beträgt. Gibt es eine Möglichkeit, dass das Feld so groß sein kann wie das breiteste Steuerelement innerhalb des Feldsatzes?

html css fieldset Leora
quelle

Antworten:

128

Verwenden display: inline-blockSie diese Option, obwohl Sie sie in einen DIV einwickeln müssen, damit sie nicht tatsächlich inline angezeigt wird. In Safari getestet.

<style type="text/css">
    .fieldset-auto-width {
         display: inline-block;
    }
</style>
<div>
  <fieldset class="fieldset-auto-width">
      <legend>Blah</legend>
      ...
  </fieldset>
</div>
Tvanfosson
quelle
4
Dies war die klarste Antwort für einen relativen n00b und löste mein identisches Problem. Vielen Dank.
Mawg sagt, Monica
Ja, dies ist eine bessere / einfachere Idee als meine Antwort, wenn sie in allen Browsern funktioniert, die Sie interessieren.
Tom
3
Zu display: inline-block;Ihrer Information : Funktioniert nicht in iE6 und IE7. Glücklich, wenn Sie sich nicht um sie kümmern müssen. :)
Diemo
Funktioniert hervorragend in IE8 und Firefox 10!
Ed Bayiates
Was ist der Voodoo mit dem Div. Es scheint notwendig, aber warum?
Superluminary
14

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

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

Denilson Sá Maia
quelle
für IE 11, Anzeige: Inline funktioniert, aber nicht Anzeige: Inline-Block
Gabe Halsmer
8

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

Tom
quelle
1

Das funktioniert auch. 

fieldset {
  width:0px;
}
dan.s.ward
quelle
1
Dies funktioniert nicht, wenn Sie mehrere Elemente in der Feldmenge haben, die in derselben Zeile erscheinen sollen.
Matthew Schinckel
Sicher, wenn Sie ein Blockelement verwenden, um sie zu umbrechen, oder eine Kombination aus Nowrap und expliziten Unterbrechungen.
dan.s.ward
1

Leider funktioniert display:inline-blocknoch nicht width:0pxin Internet Explorer bis Version 8. Ich habe Internet Explorer 9 noch 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, clear:bothdas Element zu verwenden, das dem Formular folgt. Natürlich wird es sehr offensichtlich sein, wenn Sie vergessen ;-)

Paul D.
quelle
0

Sie können jederzeit CSS verwenden, um die Breite des Feldsatzes einzuschränken, wodurch auch die darin enthaltenen Steuerelemente eingeschränkt werden.

Ich finde, dass ich oft die Breite der selectSteuerelemente einschränken muss , sonst macht es wirklich langer Optionstext völlig unüberschaubar.

Jonathan Julian
quelle
aber ich möchte es dynamisch haben, damit das Feldset "automatisch skaliert" und keine vorgegebene Breite hat
Leora
0 
 fieldset {

    min-width: 0;

    max-width: 100%;

    width: 100%;
 }
Trupti
quelle
3
Bitte fügen Sie einige
Erklärungen
Nicht einmal Tim Berners-Lee konnte dir sagen, warum diese Arbeit funktioniert, aber Scheiße funktioniert einfach lol danke!
Lucasjohnson
0

Versuche dies

<fieldset>
   <legend style="max-width: max-content;" >Blah</legend>
</fieldset>
Liebe Kumar
quelle
-1

Ich habe mein Problem behoben, indem ich den Legendenstil wie folgt überschrieben habe 

.ui-fieldset-legend
{
  font-size: 1.2em;
  font-weight: bold;
  display: inline-block;
  width: auto;`enter code here`
}
El Ghandor Yasser
quelle
-2

Wenn Sie die Mihai-Lösung weiter verfolgen, ist der Browser linksbündig ausgerichtet:

<TABLE>
  <TR>
    <TD>
      <FORM>
        <FIELDSET>
          ...
        </FIELDSET>
      </FORM>
    </TD>
  </TR>
</TABLE>

Browserübergreifend rechtsbündig:

<TABLE>
  <TR>
    <TD WIDTH=100%></TD>
    <TD>
      <FORM>
        <FIELDSET>
          ...
        </FIELDSET>
      </FORM>
    </TD>
  </TR>
</TABLE>
Dgimeno
quelle
2
Obwohl dies möglicherweise funktioniert, werden Tabellen normalerweise nicht als bewährte Methode
StackExchange What The Heck
1
Stellen Sie sich vor, dies für 5 Feldsätze zu tun? 10? 15??! Tu es nicht!
Taylor Brown
1
Für alle neuen Entwickler, die hierher kommen. Tu das nicht. Sie verwenden zehnmal mehr Code als Sie benötigen.
superluminary
-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>
Prakash Bayas
quelle
-3

Sie können das Feldset auch wie folgt in eine Tabelle einfügen:

<table>
    <tr>
       <td>
           <fieldset>
           .......
           </fieldset>
       </td>
    </tr>
</table>
Mihai
quelle