필드 세트 너비를 컨트롤만큼 넓게 만들 수있는 방법이 있습니까?
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>
'program story' 카테고리의 다른 글
| 내 메서드가 자체 예외를 throw해야합니까, 아니면 파일이없는 경우 .NET에서 throw해야합니까? (0) | 2020.10.19 |
|---|---|
| 밀리 초를 구문 분석하는 방법? (0) | 2020.10.19 |
| Chrome에서 전체 리디렉션 경로 및 HTTP 상태 코드보기 (0) | 2020.10.19 |
| Amazon S3 권한 문제-모든 파일에 대한 권한을 한 번에 설정하는 방법은 무엇입니까? (0) | 2020.10.19 |
| com.sun : tools : jar 아티팩트 누락 (0) | 2020.10.19 |