>웹 프론트엔드 >CSS 튜토리얼 >`width: auto`로 사용 가능한 공간을 채우는 ``요소를 어떻게 얻나요?

`width: auto`로 사용 가능한 공간을 채우는 ``요소를 어떻게 얻나요?

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-10-27 09:21:02708검색

How do I get an `` element to fill the available space with `width: auto`?

width: auto는 의 의미입니다. 요소?

블록 요소의 사용 가능한 공간을 채우는 지시문이라는 공통된 이해에도 불구하고 width: auto는 fields.

width: auto의 정의

CSS 사양은 에 대한 width:auto의 특정 동작을 명시적으로 정의하지 않습니다. 강요. 그러나 이는 일반적으로 브라우저가 요소의 고유 속성을 기반으로 너비를 계산해야 함을 의미합니다.

입력 필드에 대해 원하는 동작 달성

예상되는 채우기 동작을 달성하려면 에 사용 가능한 공간 fields:

  • Try width: 100%: 이는 다른 블록 수준 요소의 동작과 유사하게 컨테이너 내의 나머지 공간으로 너비를 설정합니다.

너비: 100% 실패:

입력 영역의 크기를 정의하는 기본 크기 속성 때문일 수 있습니다. 이를 재정의하려면 크기 속성을 제거하거나 빈 문자열(예: size="")로 설정하세요.

너비가 100%인 예:

<code class="html"><form style="width: 200px; background: khaki">
  <input style="width: 100%" />
</form></code>

여백과 테두리가 있는 부분 솔루션:

보다 정확한 솔루션을 위해 다음 코드에 표시된 대로 입력 필드에 음수 여백과 삽입 테두리를 추가하세요.

<code class="html"><div style="padding: 30px; width: 200px; background: red">
  <form style="width: 200px; background: blue; padding: 3px">
    <input style="width: 100%; margin: -3px; border: 2px inset #eee" />
  </form>
</div></code>

위 내용은 `width: auto`로 사용 가능한 공간을 채우는 ``요소를 어떻게 얻나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.