`display: block`이 입력 요소가 컨테이너 너비를 채우지 못하는 이유는 무엇입니까?

Input with Display: Block not Behaving Like a Block

CSS에서 요소에 display: block을 설정하면 해당 요소가 블록으로 지정됩니다. 사용 가능한 수평 공간을 채워야 하는 레벨 요소입니다. 그러나 이것이 입력 요소에 적용되면 div와 같은 일반 블록 요소처럼 동작하지 않습니다. 이는 입력 요소가 렌더링되는 방식이 이상하기 때문입니다.

Width: Auto가 예상대로 작동하지 않음

입력 요소에 width: auto를 설정하면 강제로 적용되지 않습니다. div 요소처럼 컨테이너 너비를 채우는 것입니다. 이는 입력 요소에 기본적으로 너비 속성을 재정의하는 고유한 크기와 패딩이 있기 때문입니다.

입력 너비 확장 달성

입력이 사용 가능한 너비를 채우도록 하려면, 다음 옵션을 사용할 수 있습니다:

• 고정 너비: 이는 입력 내의 다양한 콘텐츠를 고려하지 않으므로 이상적인 솔루션이 아닙니다.
• 래퍼 해결 방법: 입력 주위에 래퍼 요소를 사용하면 해결 방법을 제공할 수 있습니다. 하지만 불필요한 HTML 마크업이 추가됩니다.
• Box-Sizing: Border-Box: CSS3에서는 box-sizing 속성은 border-box로 설정된 경우 요소의 너비 계산에 패딩과 테두리를 포함시킬 수 있습니다.

.input-width-full {
  box-sizing: border-box;
  width: 100%;
}

레거시 브라우저 지원

CSS3 상자 크기 조정을 지원하지 않는 브라우저의 경우 동작 파일(.htc)을 사용하여 테두리 상자 모델을 시뮬레이션할 수 있습니다. 이를 위해서는 Internet Explorer 6 및 7을 대상으로 하는 조건부 주석을 사용해야 합니다.

이러한 기술을 활용하면 임의의 패딩과 테두리를 사용해도 컨테이너 너비를 채우기 위해 동적으로 확장되는 입력을 생성할 수 있습니다. 보다 유연하고 일관된 CSS 레이아웃을 보장합니다.

위 내용은 `display: block`이 입력 요소가 컨테이너 너비를 채우지 못하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!