전체 줄을 채우고 싶은 텍스트 상자가 있다고 가정 해 봅시다. 나는 다음과 같은 스타일을 줄 것이다.
input.wide {display:block; width: 100%}너비는 텍스트 상자의 내용을 기반으로하기 때문에 문제가 발생합니다. 텍스트 상자에는 기본적으로 여백, 테두리 및 패딩이있어 너비가 100 % 인 텍스트 상자를 컨테이너보다 크게 만듭니다.
예를 들어, 여기 오른쪽에 :
텍스트 상자를 넘어 컨테이너의 너비를 채우지 않고 텍스트 상자를 채우는 방법이 있습니까?
다음은 내가 의미하는 바를 보여주는 HTML 예입니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/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}
input.normal {display:block; float: right}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<input type="text" class="wide" />
<input type="text" class="normal" />
<div style="clear:both;"></div>
</div>
</div>
</body>
</html>이것이 실행되면 "일반"텍스트 상자를보고 "넓은"텍스트 상자가 컨테이너 너머로 튀어 나와있는 것을 볼 수 있습니다. "일반"텍스트 상자는 컨테이너의 실제 가장자리로 뜹니다. "일반"텍스트 상자처럼 가장자리를 넘어서 확장하지 않고 "와이드"텍스트 상자를 컨테이너에 채우려 고합니다.