컨테이너를 넘치지 않고 텍스트 상자 너비를 100%로 만드는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

컨테이너를 넘치지 않고 텍스트 상자 너비를 100%로 만드는 방법은 무엇입니까?

Patricia Arquette

풀어 주다： 2024-11-04 09:14:02

원래의

798명이 탐색했습니다.

How to Make Text Boxes 100% Width Without Overflowing Their Container?

100% 너비 텍스트 상자의 한계 극복

웹 개발에서는 텍스트 상자를 완전히 차지해야 하는 딜레마에 직면하는 경우가 많습니다. 컨테이너의 경계를 초과하지 않고 의도된 너비입니다. "display:block; width: 100%"로 CSS 스타일을 할당하는 것은 간단한 해결책처럼 보일 수 있지만 텍스트 상자의 기본 여백, 테두리 및 패딩으로 인해 예상치 못한 문제가 발생할 수 있습니다.

이렇게 하면 아래 예에서 볼 수 있듯이 텍스트 상자가 실제 컨테이너 크기보다 더 넓게 나타납니다.

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

로그인 후 복사

원하는 효과 달성

이 문제를 해결하고 텍스트 상자가 컨테이너 너비를 초과하지 않도록 CSS3에는 'box-sizing: border-box' 속성이 도입되었습니다. 이는 내부 패딩과 외부 테두리를 모두 포함하도록 '너비'의 정의를 재정의합니다.

그러나 CSS3의 지속적인 개발로 인해 이 속성은 현재 다양한 브라우저에서 다른 이름을 갖습니다.

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

로그인 후 복사

이전 브라우저에 대한 대체 접근 방식

브라우저 호환성이 문제인 경우 대체 접근 방식은 포함된

또는 요소. 이는 브라우저가 일반적으로 입력에 할당하는 추가 왼쪽 및 오른쪽 패딩/테두리(예: IE<8의 경우 6px)를 픽셀 단위로 보상합니다.

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