CSS에서 \"width: auto\"를 사용하여 `` 필드가 사용 가능한 공간을 채우도록 하려면 어떻게 해야 합니까?

의 경우 너비:자동 필드

CSS 초보자는 와 같은 디스플레이:블록 요소에 "width:auto" 속성을 적용할 때 혼란을 겪는 경우가 많습니다. 필드가 예상대로 작동하지 않을 수 있습니다.

자동 너비 정의:

CSS 사양은 "너비:자동"의 정확한 정의에 대해 여전히 모호하여 공간이 남아 있습니다. 혼란을 위해. 그러나 일반적으로 이는 요소의 너비가 내용에 맞게 자동으로 조정됨을 의미합니다.

필드:

필드를 다른 블록 수준 요소와 마찬가지로 사용 가능한 공간에 채우려면 다음 단계를 수행할 수 있습니다.

1. 기본 크기 덮어쓰기:

필드는 너비를 생성합니다. 이를 재정의하려면 "width:100%"를 적용하면 됩니다. 전체 상위 요소의 사용 가능한 공간에 걸쳐 너비를 설정합니다.

2. 브라우저별 테두리 문제 제거:

안타깝게도 브라우저는 테두리를 약간 다르게 처리하여 불일치를 유발합니다. 이 문제를 해결하려면 추가 CSS를 사용할 수 있습니다.

• 브라우저별 테두리 처리에 대응하기 위해 음수 여백을 적용합니다.
• 일관성을 더욱 방지하려면 삽입 테두리를 사용하세요.

예제 코드:

다음 코드는 사용 가능한 공간을 필드를 사용하여 브라우저별 테두리 문제를 극복할 수 있습니다.

<div style="padding:30px;width:200px;background:red">
  <form action="" method="post" style="width:200px;background:blue;padding:3px">
    <input size="" style="width:100%;margin:-3px;border:2px inset #eee" />
    <br /><br />
    <input size="" style="width:100%" />
  </form>
</div>

이 코드가 모든 브라우저에서 완벽하지 않을 수 있다는 점은 주목할 가치가 있습니다. 그러나 이는 원하는 동작에 가까운 근사치를 제공하고 잠재적인 브라우저 간 불일치를 해결합니다.

위 내용은 CSS에서 \"width: auto\"를 사용하여 `` 필드가 사용 가능한 공간을 채우도록 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!