전체 줄을 채우고 싶은 텍스트 상자가 있다고 가정 해 봅시다. 나는 다음과 같은 스타일을 줄 것이다.
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>이것이 실행되면 “일반”텍스트 상자를보고 “넓은”텍스트 상자가 컨테이너 너머로 튀어 나와있는 것을 볼 수 있습니다. “일반”텍스트 상자는 컨테이너의 실제 가장자리로 뜹니다. “일반”텍스트 상자처럼 가장자리를 넘어서 확장하지 않고 “와이드”텍스트 상자를 컨테이너에 채우려 고합니다.
답변
할 수있는 일은 input: 에서 기본 “extras”를 제거하는 것입니다 .
input.wide {display:block; width:100%;padding:0;border-width:0}이것은 input컨테이너 내부 를 유지합니다 . 당신이 국경을 원하는 경우 이제, 포장 inputA의를 div온 설정 테두리, div(당신이를 제거 할 수 방법 display:block으로부터 input도). 다음과 같은 것 :
<div style="border:1px solid gray;">
<input type="text" class="wide" />
</div>편집 :
또 다른 옵션은에서 스타일을 제거하는 대신 input랩에서 스타일을 보완하는 것입니다 div.
input.wide {width:100%;}
<div style="padding-right:4px;padding-left:1px;margin-right:2px">
<input type="text" class="wide" />
</div>이렇게하면 브라우저마다 결과가 약간 다르지만 컨테이너와 겹치지 않습니다. div의 값은 테두리가 얼마나 큰지와 테두리 input사이의 공간이 얼마나되는지 에 따라 다릅니다 input.
답변
텍스트 상자를 넘어 컨테이너의 너비를 채우지 않고 텍스트 상자를 채우는 방법이 있습니까?
예 : CSS3 속성 ‘box-sizing : border-box’를 사용하여 외부 패딩 및 테두리를 포함하는 ‘width’의 의미를 재정의 할 수 있습니다.
불행히도 CSS3이기 때문에 지원이 매우 성숙하지 않았으며 사양 프로세스가 아직 완료되지 않았기 때문에 브라우저에서 임시 이름이 다릅니다. 그래서:
input.wide {
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}구식 대안은 단순히 둘러싼 <div> 또는 <td> 요소에 ‘px’의 왼쪽 및 오른쪽 패딩 / 테두리 크기와 동일한 ‘패딩 오른쪽’을 브라우저에 넣을 것이라고 생각하는 것입니다. 입력하십시오. (IE <8의 경우 일반적으로 6px)
답변
이것은 나를 위해 문제를 해결했습니다!
외부 div가 필요하지 않습니다. 주어진 텍스트 상자에 적용하십시오.
box-sizing: border-box; 이 속성을 사용하면 “너비 및 높이 속성 (및 최소 / 최대 속성)에는 내용, 패딩 및 테두리가 포함되지만 여백은 포함되지 않습니다”
w3schools 의 부동산 설명을 참조하십시오 .
이것이 누군가를 돕기를 바랍니다!
답변
방금이 문제를 직접 만났으며 모든 테스트 브라우저 (IE6, IE7, Firefox)에서 작동하는 유일한 솔루션은 다음과 같습니다.
- 입력 필드를 두 개의 개별 DIV로 랩핑
- 외부 DIV를 너비 100 %로 설정하면 컨테이너가 문서를 넘치지 않습니다.
- 입력의 수평 오버플로를 보상하기 위해 정확한 양의 내부 DIV에 패딩을 넣습니다.
- 입력에 사용자 정의 패딩을 설정하여 내부 DIV에서 허용 한 것과 같은 양으로 오버플로합니다.
코드:
<div style="width: 100%">
<div style="padding-right: 6px;">
<input type="text" style="width: 100%; padding: 2px; margin: 0;
border : solid 1px #999" />
</div>
</div>여기서 입력 요소의 총 수평 오버플로는 6px-2x (패딩 + 테두리)이므로 내부 DIV에 대해 패딩 권한을 6px로 설정합니다.
답변
상자 크기 지원은 실제로 꽤 좋습니다 : http://caniuse.com/#search=box-sizing
따라서 IE7을 대상으로하지 않으면이 속성을 사용하여 이러한 종류의 문제를 해결할 수 있습니다. sass 이하와 같은 계층은 접두사가 붙은 규칙 btw를보다 쉽게 처리 할 수있게합니다.
답변
실제로 CSS는 여백, 테두리 및 패딩을 포함하여 컨테이너의 전체 너비를 기준으로 100 %를 정의하기 때문입니다. 그것은 공간이 충분하다는 것을 의미합니다. 컨테이너에 여백, 테두리 또는 패딩이없는 경우를 제외하고는 내용물의 양이 100 %보다 약간 작습니다.
이것은 반 직관적이며 많은 사람들이 현재 우리가 겪고있는 실수라고 널리 인식하고 있습니다 . 그것은 효과적으로 % 차원이 최상위 컨테이너 이외의 다른 것에 좋지 않다는 것을 의미하며, 심지어 여백, 경계 또는 패딩이없는 경우에만 유효합니다.
텍스트 필드의 여백, 테두리 및 패딩 은 지정된 CSS 크기에 포함됩니다. 컨테이너는 물건을 버리는 컨테이너입니다.
나는 98 %를 사용하여 견딜 수있게 해결했지만 컨테이너가 커질수록 입력 필드가 더 짧아지는 경향이 있기 때문에 완벽한 해결책은 아닙니다.
편집 : 나는이 비슷한 질문을 보았습니다-나는 주어진 대답을 시도한 적이 없으며 그것이 그것이 당신의 문제에 적용되는지 확실하지 않지만, 그것이 될 것 같습니다.
답변
작동 할 수있는 한 가지 해결책 은 입력 (텍스트 상자)에 음의 여백 을 적용 하거나 ie7의 고정 너비를 적용하거나 ie7 지원을 삭제하는 것입니다. 이것은 픽셀 완벽한 너비로 귀결됩니다. 7의 경우 3과 4를 추가했지만 여전히 픽셀 완벽합니다 ..
나는 같은 문제가 있었고 국경 등을위한 여분의 div를 싫어했습니다!
그래서 여기에 작동하는 것 같습니다.
스타 핵을 피하려면 ie7 전용 스타일 시트를 사용해야합니다.
input.text{
background-color: #fbfbfb;
border : solid #eee 1px;
width: 100%;
-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 32px;
*line-height:32px;
*margin-left:-3px;
*margin-right:-4px;
display: inline;
padding: 0px 0 0 5px;
}