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

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