오버플로 없이 텍스트 상자를 컨테이너의 100% 범위로 만드는 방법은 무엇입니까?

100% 너비 텍스트 상자 확장 제어

컨테이너의 전체 너비에 걸쳐 텍스트 상자를 원하는 것이 일반적입니다. 이를 달성하려면 다음과 같은 스타일을 적용할 수 있습니다.

<code class="css">input.wide {
  display: block;
  width: 100%;
}</code>

그러나 이 접근 방식은 문제에 직면합니다. 텍스트 상자의 너비는 내용에 따라 정의됩니다. 텍스트 상자의 기본 여백, 테두리 및 패딩으로 인해 텍스트 상자가 컨테이너 경계를 넘어 확장되어 보기 흉한 간격이 생성됩니다.

이 문제를 해결하려면 텍스트 상자가 컨테이너의 너비를 채울 수 있는 방법이 필요합니다. 그것을 초과하지 않고 용기. 한 가지 해결책은 CSS3 속성인 box-sizing: border-box를 활용하는 것입니다. 이 속성은 외부 패딩과 테두리를 포함하도록 너비의 의미를 재정의합니다.

안타깝게도 상자 크기 조정에 대한 지원은 아직 보편적이지 않습니다. 따라서 브라우저별 대체 값을 포함할 수 있습니다.

<code class="css">input.wide {
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}</code>

상자 크기 조정을 사용하는 대신 수동으로 포함하는 요소에 padding-right를 적용하여 예상 패딩과 동일하도록 할 수 있습니다.

두 가지 접근 방식을 모두 사용하면 텍스트 상자의 너비를 제어하면서 텍스트 상자가 컨테이너 범위를 벗어나는 것을 방지할 수 있습니다.

위 내용은 오버플로 없이 텍스트 상자를 컨테이너의 100% 범위로 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!