program story

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

inputbox 2020. 10. 19. 08:02
반응형

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


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/>사이 에 하나 사용하십시오 . 이것은 의미 상 정확하고 필요한 것보다 어렵지 않습니다.


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


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

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


 fieldset {

    min-width: 0;

    max-width: 100%;

    width: 100%;
 }

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

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


이것도 작동합니다. 

fieldset {
  width:0px;
}

이 시도

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

Cross-browser right aligned:

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

You can also put the fieldset inside a table, like so:

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

참고URL : https://stackoverflow.com/questions/2302495/is-there-any-way-to-have-a-fieldset-width-only-be-as-wide-as-the-controls-in-the

반응형