100% 너비 텍스트 상자가 컨테이너 밖으로 확장되는 것을 막을 수 있습니까?
한 줄 전체를 채우고 싶은 텍스트 상자가 있다고 가정해 보겠습니다.다음과 같은 스타일을 제공합니다.
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>
이것이 실행되면 "일반" 텍스트 상자를 보면 "넓은" 텍스트 상자가 용기 밖으로 나와 있음을 알 수 있습니다."일반" 텍스트 상자가 용기의 실제 가장자리로 이동합니다.저는 "일반" 텍스트 상자처럼 가장자리 너머로 확장하지 않고 "넓은" 텍스트 상자가 컨테이너를 채우도록 노력하고 있습니다.
텍스트 상자가 용기의 너비를 넘어서 확장하지 않고 채울 수 있는 방법이 있습니까?
예: CSS3 속성 'box-size: border-box'를 사용하여 외부 패딩과 테두리를 포함하는 'width'의 의미를 재정의할 수 있습니다.
안타깝게도 CSS3이기 때문에 지원이 많이 성숙되지 않았고, 스펙 과정이 아직 끝나지 않았기 때문에 브라우저에서 임시 이름이 다릅니다.그래서:
input.wide {
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
구식 대안은 단순히 브라우저가 입력을 제공할 것으로 생각하는 'px'에서 추가적인 좌우 패딩/경계의 양과 동일한 양의 '패딩-라이트'를 동봉하는 <div> 또는 <td> 요소에 넣는 것입니다.(일반적으로 IE의 경우 6px<8.)
이 할 수이신할있추것기은를본것제다입니거는하당가는에서 기본 "를입니다.input:
input.wide {display:block; width:100%;padding:0;border-width:0}
이것은 계속 유지될 것입니다.input그것의 용기 안에.자, 만약 당신이 국경을 원한다면, 포장하세요.input순식간에div의 테두리를 두른 채.div( (그렇게하제수있다습니거할면▁the▁(그)를 제거할 수 display:blockinput다음과 같은 것도 있습니다.
<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그리고 국경.
이것으로 저는 문제를 해결했습니다!
외부 디브의 필요성 없이 말입니다.주어진 텍스트 상자에 적용하기만 하면 됩니다.
box-sizing: border-box;
이 속성을 사용하여 "폭 및 높이 속성(및 최소/최대 속성)에는 내용, 패딩 및 테두리가 포함되지만 여백은 포함되지 않습니다."
w3 학교의 숙박시설에 대한 설명을 참조하십시오.
이것이 누군가에게 도움이 되기를 바랍니다!
방금 이 문제를 발견했는데, 모든 테스트 브라우저(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-delay
따라서 IE7을 대상으로 하지 않는 한 이 속성을 사용하여 이러한 문제를 해결할 수 있어야 합니다.sass 이하와 같은 계층을 사용하면 접두사가 붙은 규칙을 더 쉽게 처리할 수 있습니다.
사실, CSS는 여백, 테두리, 패딩을 포함하여 컨테이너의 전체 너비에 대해 100%를 정의하기 때문입니다. 즉, 공간이 사용 가능하다는 것을 의미합니다.용기에 여백, 테두리 또는 패딩이 없는 경우를 제외하고 내용물은 100%보다 약간 작습니다.
이것은 반직관적이며 많은 사람들이 현재 우리가 처한 실수로 널리 간주하고 있습니다.이는 실질적으로 % 치수가 최상위 컨테이너 이외의 다른 용도에는 적합하지 않다는 것을 의미하며, 여백, 테두리 또는 패딩이 없는 경우에도 마찬가지입니다.
텍스트 필드의 여백, 테두리 및 패딩은 지정된 CSS 크기에 포함됩니다. 이는 컨테이너가 물건을 던집니다.
저는 98%를 사용하여 충분히 해결했지만 용기가 커질수록 입력 필드가 더 부족해지는 경향이 있기 때문에 완벽한 해결책은 아닙니다.
편집: 저는 비슷한 질문을 접했습니다. 주어진 답을 시도해 본 적이 없고, 그것이 당신의 문제에 적용되는지 확실하게는 모르겠지만, 그렇게 될 것 같습니다.
한 가지 해결책은 입력(텍스트 상자)에서 마이너스 마진을 적용하는 것입니다.또는 i7 또는 i7 지지대를 떨어뜨릴 수 있는 고정 너비.이로 인해 픽셀 단위 너비가 완벽해집니다.저는 7이라 3과 4를 더했지만 여전히 픽셀 단위로 완벽합니다.
저도 같은 문제가 있었고 국경 등을 위한 여분의 디브를 갖는 것을 싫어했습니다!
그래서 여기 효과가 있는 것처럼 보이는 저의 해결책이 있습니다!
스타핵을 피하기 위해서는 i7 전용 스타일시트를 사용해야 합니다.
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;
}
사용할 수 없는 경우box-sizing:border-box당신은 그것을 제거해 볼 수 있습니다.width:100%그리고 매우 큰 것을 넣는 것.size의 속성<input>요소, 단점은 HTML을 수정해야 하며 CSS로만 할 수 없다는 것입니다.
<input size="1000"></input>
동적으로 수행할 필요가 없는 경우(예: 양식의 너비가 고정된 경우) 하위 너비를 설정하면 됩니다.<input>용기 너비의 요소에서 패딩, 여백, 테두리 등의 장식을 뺀 값:
// the parent div here has a width of 200px:
.form-signin input[type="text"], .form-signin input[type="password"], .form-signin input[type="email"], .form-signin input[type="number"] {
font-size: 16px;
height: auto;
display: block;
width: 280px;
margin-bottom: 15px;
padding: 7px 9px;
}
박스 크기를 사용할 수 없는 경우(예: iText를 사용하여 HTML을 PDF로 변환하는 경우).사용해 보십시오.
CSS
.input-wrapper { border: 1px solid #ccc; padding: 0 5px; min-height: 20px; }
.input-wrapper input[type=text] { border: none; height: 20px; width: 100%; padding: 0; margin: 0; }
HTML
<div class="input-wrapper">
<input type="text" value="" name="city"/>
</div>
효과:
<div>
<input type="text"
style="margin: 5px; padding: 4px; border: 1px solid;
width: 200px; width: calc(100% - 20px);">
</div>
첫 번째 '폭'은 이전 브라우저에 대한 예비 규칙입니다.
추가 패딩에 대해 오프셋할 입력 스타일만 지정합니다.다음 예제에서는 입력의 패딩이 왼쪽과 오른쪽에서 10px이고 총 패딩 오프셋은 20px입니다.
input[type=text]{
width: calc(100% - 20px);
}
언급URL : https://stackoverflow.com/questions/628500/can-i-stop-100-width-text-boxes-from-extending-beyond-their-containers
'programing' 카테고리의 다른 글
| Ajax 호출 채우기 Typeahead 부트스트랩 (0) | 2023.08.18 |
|---|---|
| 지정된 UIColor에 대해 더 밝고 어두운 색상 변화를 표시합니다. (0) | 2023.08.18 |
| ASP.Net 유효성 검사 요약으로 인해 페이지가 맨 위로 이동합니다. (0) | 2023.08.18 |
| 빠른 클릭 시 Chrome에서 요소가 파란색으로 강조되는 것을 방지하기 위한 방법은 무엇입니까? (0) | 2023.08.18 |
| spring @AutoWired Map을 사용할 수 있습니까? (0) | 2023.08.18 |