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>
이 코드는 IE8 및 Firefox에서 작동합니다.
<td>
<textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea>
</td>
box-sizing 속성을 사용할 수 있으며, 모든 주요 표준 호환 브라우저와 IE8 +에서 지원됩니다. 그래도 IE7에 대한 해결 방법이 필요합니다. 자세한 내용은 여기를 참조 하십시오 .
아니요, CSS로는 그렇게 할 수 없습니다. 이것이 바로 마이크로 소프트가 처음에 또 다른 실용적인 박스 모델을 도입 한 이유 입니다. 결국 승리 한 박스 모델은 비율과 단위를 혼합하는 것이 실용적이지 않습니다.
패딩과 테두리 너비를 부모의 백분율로 표현해도 괜찮다고 생각하지 않습니다.
CSS 솔루션 대신 인라인 스타일링 솔루션을 찾고 있는데 이것이 반응 형 텍스트 영역에 가장 적합한 방법입니다.
<div style="width: 100%; max-width: 500px;">
<textarea style="width: 100%;"></textarea>
</div>
다음과 같이 패딩하고 오프셋하면 :
textarea
{
border:1px solid #999999;
width:100%;
padding: 7px 0 7px 7px;
position:relative; left:-8px; /* 1px border, too */
}
텍스트 영역의 우측 완벽한 컨테이너의 우측에 정렬, 및 완벽한 컨테이너의 본문과 텍스트 영역 가지런 내부 또는 텍스트 및 텍스트 영역의 왼쪽 비트를 '돌출'. 때로는 더 예쁘다.
사용 크기 속성을 상자 :
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
도움이 될 것입니다
Bootstrap을 사용하는 사람들에게 textarea.form-control은 textarea 크기 조정 문제로 이어질 수 있습니다. Chrome과 Firefox는 다음 Bootstrap CSS에서 다른 높이를 사용하는 것으로 보입니다.
textarea.form-conrtol{
height:auto;
}
나는 종종 그 문제를로 고쳤다 calc(). 텍스트 영역에 100 %의 너비와 특정 양의 패딩을 제공하지만 텍스트 영역에 부여한 100 % 너비의 총 왼쪽 및 오른쪽 패딩을 빼야합니다.
textarea {
border: 0px;
width: calc(100% -10px);
padding: 5px;
}
또는 텍스트 영역에 테두리를 제공하려는 경우 :
textarea {
border: 1px;
width: calc(100% -12px); /* plus the total left and right border */
padding: 5px;
}
마이너스 마진은 어떻습니까?
textarea {
border:1px solid #999999;
width:100%;
margin:5px -4px; /* 4px = border+padding on one side */
padding:3px;
}
* {
box-sizing: border-box;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
input[type=text], select, textarea{
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
}<div class="container">
<div class="row">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Your name..">
</div>
<div class="row">
<label for="country">Country</label>
<select id="country" name="country">
<option value="australia">UK</option>
<option value="canada">USA</option>
<option value="usa">RU</option>
</select>
</div>
<div class="row">
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
</div>
</div>'Programming' 카테고리의 다른 글
| SQL Server에서 MONEY 또는 DECIMAL (x, y) 데이터 유형을 선택해야합니까? (0) | 2020.02.20 |
|---|---|
| .NET의 문자열에서 분음 부호 (악센트)를 어떻게 제거합니까? (0) | 2020.02.20 |
| Fragments에서 onBackPressed ()를 구현하는 방법은 무엇입니까? (0) | 2020.02.20 |
| 파이썬에서 새로운 받아쓰기 (0) | 2020.02.20 |
| Visual Studio에 대한 형식 코드 바로 가기가 있습니까? (0) | 2020.02.20 |