100% 너비의 텍스트 상자를 컨테이너 내에 포함할 수 있습니까?

컨테이너 내 텍스트 상자 너비 제어

웹 개발에서는 텍스트 상자가 컨테이너 너비를 채우는 것이 바람직한 경우가 많습니다. 그러나 브라우저에서 추가한 여백, 테두리 및 패딩으로 인해 100% 너비 텍스트 상자가 컨테이너 경계를 넘어 확장될 수 있습니다.

100% 너비 텍스트 상자를 포함할 수 있습니까?

예, CSS3 속성 box-sizing: border-box를 활용하면 외부 패딩을 고려하여 "너비"를 재정의할 수 있습니다.

CSS 구현

input.wide {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

이 솔루션은 텍스트 상자 너비 계산에 패딩과 테두리가 차지하는 추가 공간을 포함하여 작동합니다.

비 CSS3에 대한 대체 브라우저

이전 브라우저의 경우 대안은 둘러싸는 컨테이너에 특정 양의 오른쪽 패딩을 추가하는 것입니다.

#container {
    padding-right: 6px;
}

이전 IE 버전의 경우 패딩 양은 일반적으로 6px입니다. 8.

위 내용은 100% 너비의 텍스트 상자를 컨테이너 내에 포함할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!