넓은 텍스트 상자가 컨테이너 너머로 확장되는 것을 방지하는 방법은 무엇입니까?

넓은 텍스트 상자가 컨테이너를 과도하게 확장하는 것을 방지

컨테이너의 전체 너비에 걸쳐 있는 텍스트 상자를 만들려고 하면 일반적인 문제가 발생합니다. 텍스트 상자는 컨테이너 경계를 넘어 확장될 수 있습니다. 이는 브라우저가 기본적으로 여백, 테두리 및 패딩을 할당하여 텍스트 상자의 전체 너비를 효과적으로 늘리기 때문입니다.

다음 예를 고려하세요.

<code class="html"><div id="outer">
  <div id="inner">
    <input type="text" class="wide">
    <input type="text" class="normal">
    <div style="clear:both;"></div>
  </div>
</div></code>

<code class="css">#outer {
  border: 1px solid #000;
  width: 320px;
  margin: 0px;
  padding: 0px;
}
#inner {
  margin: 20px;
  padding: 20px;
  background: #999;
  border: 1px solid #000;
}
input.wide {
  display: block;
  margin: 0px;
  width: 100%;
}
input.normal {
  display: block;
  float: right;
}</code>

이 시나리오에서는 "와이드" 클래스 텍스트 상자는 컨테이너 너머로 확장되는 반면 "일반" 클래스 텍스트 상자는 컨테이너 가장자리에 정확하게 정렬됩니다. 과도한 확장을 방지하기 위해 CSS3에 도입된 "box-sizing" 속성이 해결책을 제공합니다.

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

"box-sizing"을 "border-box"로 설정하면 텍스트 상자의 너비가 다음과 같이 정의됩니다. 외부 패딩과 테두리를 포함합니다. 이렇게 하면 텍스트 상자가 경계를 넘어 확장되지 않고 컨테이너의 전체 너비를 차지하게 됩니다.

안타깝게도 "상자 크기 조정"은 CSS3 속성이므로 브라우저 호환성이 다를 수 있습니다. 사양 프로세스가 진행됨에 따라 브라우저는 Mozilla의 경우 "moz-box-sizing", WebKit 기반 브라우저의 경우 "webkit-box-sizing" 등 다양한 임시 이름을 채택했습니다.

이전 버전에 대한 대체 접근 방식 브라우저에는 상위 요소(예: "div" 또는 "td")에 "padding-right"를 적용하는 작업이 포함됩니다. 이는 입력 요소의 기본 패딩과 테두리가 차지하는 추가 공간을 수용하는 데 도움이 될 수 있습니다. 단, 사용하는 브라우저에 따라 필요한 "패딩 권한"의 양은 달라질 수 있습니다.

위 내용은 넓은 텍스트 상자가 컨테이너 너머로 확장되는 것을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!