필드 세트 너비를 컨트롤만큼 넓게 만드는 방법이 있습니까?

fieldset의 기본값은 컨테이너 너비의 100 % 인 것 같습니다. 필드 세트 내에서 가장 넓은 컨트롤만큼 크게 필드 세트를 설정할 수있는 방법이 있습니까?

display: inline-block실제로 인라인으로 표시되지 않도록하려면 DIV 안에 래핑해야하지만을 사용하십시오 . 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} 또는 fieldset {display:inline-block}

두 개의 필드 세트를 세로로 분리하려면 둘 <br/>사이 에 하나 를 사용하십시오 . 이것은 의미 상 정확하고 필요한 것보다 어렵지 않습니다.

당신은 그것을 띄울 수 있습니다, 그러면 그것은 그 내용물만큼만 넓을 것입니다. 그러나 당신은 그 수레들을 지워야합니다.

이것도 작동합니다. 

fieldset {
  width:0px;
}

안타깝게도 Internet Explorer 8 display:inline-block까지도 width:0px작동 하지 않습니다. Internet Explorer 9를 사용 해보지 않았습니다. Internet Explorer를 무시하고 싶지만 그렇게 할 수 없습니다.

Firefox 및 Internet Explorer 8에서 작동하는 유일한 옵션은 float:left. 유일한 단점은 clear:both양식을 따르는 요소 에 사용하는 것을 기억해야 한다는 것입니다. 물론 잊어 버리면 아주 분명해집니다 ;-)

항상 CSS를 사용하여 필드 세트의 너비를 제한 할 수 있으며, 이는 내부 컨트롤도 제한합니다.

종종 select컨트롤 의 너비를 제한해야합니다. 그렇지 않으면 정말 긴 옵션 텍스트로 인해 완전히 관리 할 수 ​​없게됩니다.

 fieldset {

    min-width: 0;

    max-width: 100%;

    width: 100%;
 }

이 시도

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

범례 스타일을 아래와 같이 재정 의하여 문제를 해결했습니다.

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

Mihai 솔루션을 더 나아가 브라우저 간 왼쪽 정렬 :

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

브라우저 간 오른쪽 정렬 :

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

다음과 같이 테이블 안에 fieldset을 넣을 수도 있습니다.

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