Czy istnieje sposób, aby szerokość zestawu pól była tak szeroka, jak szerokość kontrolek w nich?

80

Wygląda na to, że zestaw pól domyślnie przyjmuje 100% szerokości swojego kontenera. Czy jest jakiś sposób, aby ustawić pole tak duże, jak najszersza kontrolka w zestawie pól?

leora
źródło

Odpowiedzi:

128

Użyj display: inline-block, chociaż musisz owinąć go wewnątrz DIV, aby nie wyświetlał się w tekście. Przetestowano w Safari.

<style type="text/css">
    .fieldset-auto-width {
         display: inline-block;
    }
</style>
<div>
  <fieldset class="fieldset-auto-width">
      <legend>Blah</legend>
      ...
  </fieldset>
</div>
tvanfosson
źródło
4
To była najwyraźniejsza odpowiedź dla względnego n00b i rozwiązała mój identyczny problem. Dzięki.
Mawg mówi, że przywróć Monice
Tak, to lepszy / prostszy pomysł niż moja odpowiedź, jeśli działa we wszystkich przeglądarkach, na których Ci zależy.
Tom
3
FYI: display: inline-block;nie działa w iE6 i IE7. Cieszę się, jeśli nie musisz się nimi przejmować. :)
Diemo
Działa świetnie w IE8 i Firefox 10!
Ed Bayiates,
Co to jest voodoo z div. Wydaje się to konieczne, ale dlaczego?
superluminarium
14

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

Jeśli chcesz oddzielić pionowo dwa zestawy pól, użyj jednego <br/>między nimi. Jest to poprawne semantycznie i nie trudniejsze, niż powinno.

Denilson Sá Maia
źródło
dla IE 11, wyświetlacz: inline działał, ale nie wyświetla: inline-block
Gabe Halsmer
8

Mógłbyś go unieść, wtedy będzie tak szeroki, jak jego zawartość, ale musisz się upewnić, że wyczyścisz te elementy.

Tomek
źródło
1

To też działa. 

fieldset {
  width:0px;
}
dan.s.ward
źródło
1
To nie działa, jeśli masz wiele elementów w zestawie pól, które powinny pojawić się w tym samym wierszu.
Matthew Schinckel,
Jasne, że tak, jeśli używasz elementu blokowego do zawijania ich lub kombinacji nowrap i jawnych przerw.
dan.s.ward
1

Niestety ani display:inline-blocknie width:0pxdziała w Internet Explorerze do wersji 8. Nie próbowałem Internet Explorera 9. Tak jak chciałbym zignorować Internet Explorera, nie mogę.

Jedyną opcją, która działa w przeglądarkach Firefox i Internet Explorer 8, jest float:left. Jedyną drobną wadą jest to, że trzeba pamiętać o zastosowaniu clear:bothna elemencie podążającym za formą. Oczywiście będzie to bardzo oczywiste, jeśli zapomnisz ;-)

Paul D.
źródło
0

Zawsze możesz użyć CSS, aby ograniczyć szerokość zestawu pól, co również ograniczy wewnętrzne elementy sterujące.

Uważam, że często muszę ograniczać szerokość selectkontrolek, w przeciwnym razie naprawdę długi tekst opcji sprawi, że będzie to całkowicie niemożliwe do zarządzania.

Jonathan Julian
źródło
ale chcę, aby był dynamiczny, aby
zestaw pól był „autosize
0
 fieldset {

    min-width: 0;

    max-width: 100%;

    width: 100%;
 }
Trupti
źródło
3
Proszę dodać wyjaśnienia
Rarblack,
Nawet Tim Berners-Lee nie mógł ci powiedzieć, dlaczego to działa, ale gówno po prostu działa, dzięki lol!
lucasjohnson
0

Spróbuj tego

<fieldset>
   <legend style="max-width: max-content;" >Blah</legend>
</fieldset>
Uwielbiam Kumara
źródło
-1

naprawiłem mój problem, zastępując styl legendy jak poniżej

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

Idąc dalej z rozwiązaniem Mihai, wyrównane do lewej w różnych przeglądarkach:

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

Wyrównanie do prawej w różnych przeglądarkach:

<TABLE>
  <TR>
    <TD WIDTH=100%></TD>
    <TD>
      <FORM>
        <FIELDSET>
          ...
        </FIELDSET>
      </FORM>
    </TD>
  </TR>
</TABLE>
Dgimeno
źródło
2
Chociaż może to zadziałać, tabele nie są zwykle uważane za dobrą praktykę w przypadku układów ... stackoverflow.com/questions/83073/…
StackExchange What the Heck
1
wyobraź sobie, że robisz to dla 5 zestawów pól? 10? 15 ??! nie rób tego!
Taylor Brown
1
Dla wszystkich nowych programistów, którzy tu przyjeżdżają. Nie rób tego. Użyjesz 10 razy więcej kodu niż potrzebujesz.
superluminarium
-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
źródło
-3

Możesz również umieścić zestaw pól wewnątrz tabeli, na przykład:

<table>
    <tr>
       <td>
           <fieldset>
           .......
           </fieldset>
       </td>
    </tr>
</table>
Mihai
źródło