Có cách nào để có chiều rộng tập trường chỉ rộng bằng các điều khiển trong chúng không?

Có vẻ như tập trường được mặc định bằng 100% chiều rộng của vùng chứa của nó. Có cách nào để bạn có thể đặt trường chỉ lớn như điều khiển rộng nhất bên trong tập trường không?

Sử dụng display: inline-block, mặc dù bạn cần phải bọc nó bên trong DIV để ngăn nó thực sự hiển thị nội dòng. Đã thử nghiệm trong 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} hoặc là fieldset {display:inline-block}

Nếu bạn muốn tách hai tập trường theo chiều dọc, hãy sử dụng một tập hợp <br/>giữa chúng. Điều này đúng về mặt ngữ nghĩa và không khó hơn nó phải được.

Bạn có thể thả nổi nó, sau đó nó sẽ chỉ rộng bằng với nội dung của nó, nhưng bạn sẽ phải đảm bảo rằng bạn đã xóa các phao nổi đó.

Điều này cũng hoạt động. 

fieldset {
  width:0px;
}

Rất tiếc là cả hai đều display:inline-blockkhông width:0pxhoạt động trong Internet Explorer lên đến phiên bản 8. Tôi chưa thử Internet Explorer 9. Tôi không muốn bỏ qua Internet Explorer, nhưng tôi không thể.

Tùy chọn duy nhất hoạt động trên Firefox và Internet Explorer 8 là float:left. Hạn chế nhỏ duy nhất là bạn phải nhớ sử dụng clear:bothtrên phần tử theo sau biểu mẫu. Tất nhiên, nó sẽ rất rõ ràng nếu bạn quên ;-)

Bạn luôn có thể sử dụng CSS để hạn chế chiều rộng của tập trường, điều này cũng sẽ hạn chế các điều khiển bên trong.

Tôi thấy rằng tôi thường phải hạn chế chiều rộng của các selectđiều khiển, nếu không, văn bản tùy chọn thực sự dài sẽ khiến nó hoàn toàn không thể quản lý được.

 fieldset {

    min-width: 0;

    max-width: 100%;

    width: 100%;
 }

thử cái này

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

tôi đã khắc phục sự cố của mình bằng cách ghi đè kiểu chú giải như Dưới đây

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

Tiến xa hơn về giải pháp Mihai, căn trái trên nhiều trình duyệt:

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

Căn phải trên nhiều trình duyệt:

<TABLE>
  <TR>
    <TD WIDTH=100%></TD>
    <TD>
      <FORM>
        <FIELDSET>
          ...
        </FIELDSET>
      </FORM>
    </TD>
  </TR>
</TABLE>

            <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>

Bạn cũng có thể đặt tập trường bên trong bảng, như sau:

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