[html] CSS에 패딩이있을 때 넘치지 않고 TextArea를 100 % 너비로 만들려면 어떻게합니까?
다음 CSS 및 HTML 스 니펫이 렌더링됩니다.
textarea
{
border:1px solid #999999;
width:100%;
margin:5px 0;
padding:3px;
}<div style="display: block;" id="rulesformitem" class="formitem">
<label for="rules" id="ruleslabel">Rules:</label>
<textarea cols="2" rows="10" id="rules"/>
</div>문제는 텍스트 영역이 부모보다 8px 더 넓습니다 (테두리의 경우 2px + 패딩의 경우 6px). 테두리와 패딩을 계속 사용하지만 전체의 크기를 textarea부모의 너비로 제한하는 방법이 있습니까?
답변
해킹을 잊어 버리고 CSS로 해보는 것이 어떻습니까?
내가 자주 사용하는 것 :
.boxsizingBorder {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}답변
많은 CSS 형식 문제에 대한 답은 “다른 <div>를 추가하십시오!”
그래서 그 정신에서 테두리 / 패딩이 적용되는 래퍼 div를 추가 한 다음 100 % 너비의 텍스트 영역을 그 안에 넣었습니까? 다음과 같은 것 (예상치 않은) :
textarea
{
width:100%;
}
.textwrapper
{
border:1px solid #999999;
margin:5px 0;
padding:3px;
}<div style="display: block;" id="rulesformitem" class="formitem">
<label for="rules" id="ruleslabel">Rules:</label>
<div class="textwrapper"><textarea cols="2" rows="10" id="rules"/></div>
</div>답변
우리가 달성하고자하는 것의 최종 출력을 고려해 봅시다 : 경계와 패딩이있는 패딩 된 텍스트 영역, 클릭하면 텍스트 영역에 포커스를 전달하는 특성, 자동 100 % 너비의 이점 블록 요소의 전형.
내 생각에 가장 좋은 방법은 최대한 낮은 수준의 솔루션을 사용하여 최대 브라우저 지원에 도달하는 것입니다. 이 경우 Javascript (어쨌든 우리 모두가 좋아하는)를 사용하지 않고 HTML 만 제대로 작동 할 수 있습니다.
LABEL 태그는 이러한 동작이 있으며 해결해야하는 입력 요소를 포함 할 수 있기 때문에 도움이됩니다. 기본 스타일은 인라인 요소 중 하나이므로 레이블에 블록 표시 스타일을 지정하면 패딩 및 테두리를 포함하여 자동 100 % 너비를 사용할 수 있으며 내부 텍스트 영역에는 테두리, 패딩 없음 및 100 % 너비가 있습니다. .
W3C 사양을 살펴보면 다음과 같은 이점이 있습니다.
- “for”속성이 필요하지 않습니다. LABEL 태그에 대상 입력이 포함 된 경우 클릭하면 하위 입력에 자동으로 초점을 맞 춥니 다.
- 텍스트 영역의 외부 레이블이 이미 디자인 된 경우 지정된 입력에 하나 이상의 레이블이있을 수 있으므로 충돌이 발생하지 않습니다.
자세한 내용은 W3C 관련 사항 을 참조하십시오.
간단한 예 :
.container {
width: 400px;
border: 3px
solid #f7c;
}
.textareaContainer {
display: block;
border: 3px solid #38c;
padding: 10px;
}
textarea {
width: 100%;
margin: 0;
padding: 0;
border-width: 0;
}<body>
<div class="container">
I am the container
<label class="textareaContainer">
<textarea name="text">I am the padded textarea with a styled border...</textarea>
</label>
</div>
</body>.textareaContainer 요소의 패딩 및 테두리는 텍스트 영역에 제공하려는 요소입니다. 원하는 스타일로 편집하십시오. 클릭 할 때 그 동작을 볼 수 있도록 .textareaContainer 요소에 크고 눈에 띄는 패딩과 테두리를주었습니다.
답변
패딩 너비에 대해 너무 신경 쓰지 않으면이 솔루션은 실제로 패딩도 백분율로 유지합니다.
textarea
{
border:1px solid #999999;
width:98%;
margin:5px 0;
padding:1%;
}완벽하지는 않지만 패딩이 생기고 너비가 100 %까지 증가하므로 모든 것이 좋습니다
답변
나는 여기에 다른 해결책을 보았습니다. 너무 간단하다 : 텍스트 영역의 컨테이너에 추가 패딩 오른쪽을. 이렇게하면 텍스트 영역에 여백, 테두리 및 패딩이 유지되므로 Beck이 크롬과 사파리가 텍스트 영역 주위에 놓은 포커스 하이라이트에 대해 지적한 문제를 피할 수 있습니다.
컨테이너의 오른쪽 여백은 텍스트 영역의 양쪽에있는 유효 여백, 테두리 및 여백의 합계와 컨테이너에 필요한 다른 여백의 합이어야합니다. 따라서 원래 질문의 경우 :
textarea{
border:1px solid #999999;
width:100%;
margin:5px 0;
padding:3px;
}
.textareacontainer{
padding-right: 8px; /* 1 + 3 + 3 + 1 */
}<div class="textareacontainer">
<textarea></textarea>
</div>