너비가 100 % 인 입력 요소가 테이블의 셀 테두리를 넘는 이유를 아는 사람이 있습니까?
아래 입력 상자의 간단한 예에서 테이블의 셀 테두리를 넘어 가면 결과는 끔찍합니다. 이것은 테스트되었으며 Firefox, IE7 및 Safari에서 동일한 방식으로 발생합니다.
당신에게 의미가 있습니까? 내가 뭔가를 놓치고 있습니까? 가능한 해결책에 대해 알고 있습니까?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <!-- don't use closing slash in meta tag, it breaks HTML4.01 transitional -->
<title>Test input text in table</title>
<style type="text/css">
table {border-top: 1px solid #ff0000; border-left: 1px solid #ff0000;}
table td {border-right: 1px solid #00ff00; border-bottom: 1px solid #00ff00;}
input[type="text"] {width: 100%;} /* removing this would make input not to go over cells border, but they would be too short, I want them to fit cells size */
</style>
</head><body>
<table cellpadding="0" cellspacing="0">
<tr>
<td><p>column one hello babe babe babe</p></td>
<td><p>column two hello babe more</p></td>
<td><p>column three hello babe more and more</p></td>
</tr>
<tr>
<td><input type="text" value="test"></td>
<td><input type="text" value="test"></td>
<td><input type="text" value="test"></td>
</tr>
</table>
</body></html>답변
CSS3 box-sizing속성을 사용하여 외부 패딩 및 테두리를 포함 할 수 있습니다 .
input[type="text"] {
width: 100%;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
}답변
너비 값은 테두리 또는 패딩을 고려하지 않습니다.
http://www.htmldog.com/reference/cssproperties/width/
각면에 2px의 패딩과 각면에 1px의 테두리가 있습니다.
100 % + 2 * (2px + 1px) = 100 % + 6px, 부모 td가 가진 100 % 하위 콘텐츠보다 큽니다.
다음과 같은 옵션이 있습니다.
- @pricco의 답변에
box-sizing: border-box;따라 설정하십시오 . - 또는 0 여백 및 패딩 사용 (추가 크기 방지).
답변
이와 같은 문제 width:95%;는 넓고 유연한 레이아웃에서 제대로 보이지 않는다는 것입니다 (5 %는 30 픽셀과 같을 수 있기 때문입니다).
다음 솔루션은 저에게 매우 잘 작동합니다 (Firefox, IE 9, Safari에서 테스트 됨).
<table style="background-color: blue; width: 100%;" cellpadding="0" cellspacing="0">
<tr>
<td style="background-color: red; padding: 3px;">
<div style="margin-right: 3px;">
<div style="padding-right: 3px;">
<input type="text" style="width:100%;">
</div>
</div>
</td>
<td style="background-color: purple; padding: 3px;">
<div style="margin-right: 3px;">
<div style="padding-right: 3px;">
<input type="text" style="width:100%;">
</div>
</div>
</td>
<td style="background-color: green; padding: 3px;">
<div style="margin-right: 3px;">
<div style="padding-right: 3px;">
<input type="text" style="width:100%;">
</div>
</div>
</td>
</tr>
</table>(올바른 패딩을 쉽게 알아볼 수 있도록 색상을 추가했습니다.)
트릭은 입력을 두 개의 div로 래핑하는 것입니다. 바깥쪽에는 3px 여백 (td보다 3px 더 작음)이 있고 안쪽에는 3px 패딩이 있습니다. 이것은 입력을 시작하려는 td보다 6px 더 작게 만듭니다.
나는 이것의 메커니즘에 대해 확신하지 못하지만 작동합니다.
이 간단한 예제에서는 오른쪽 여백이 6 인 단일 div에서도 작동합니다. 그러나 내 웹 응용 프로그램의 경우 위의 솔루션 만 작동합니다.
<table style="background-color: blue; width: 100%;" cellpadding="0" cellspacing="0">
<tr>
<td style="background-color: red; padding: 3px;">
<div style="margin-right: 6px;">
<input type="text" style="width:100%;">
</div>
</td>
<td style="background-color: purple; padding: 3px;">
<div style="margin-right: 6px;">
<input type="text" style="width:100%;">
</div>
</td>
<td style="background-color: green; padding: 3px;">
<div style="margin-right: 6px;">
<input type="text" style="width:100%;">
</div>
</td>
</tr>
</table>답변
문제는 이전에 설명되었으므로 다시 반복하겠습니다. 너비는 테두리와 패딩을 고려하지 않습니다. 이것에 대한 한 가지 가능한 대답은 논의되지 않았지만 내가 찾은 많은 도움이 당신의 입력을 감싸는 것입니다. 다음은 코드이며, 이것이 어떻게 도움이되는지 잠시 후에 설명하겠습니다.
<table>
<tr>
<td><div style="overflow:hidden"><input style="width:100%" type="text" name="name" value="hello world" /></div></td>
</tr>
</table>INPUT을 감싸는 DIV에는 패딩도없고 테두리도 없습니다. 이것이 해결책입니다. DIV는 컨테이너의 크기로 확장되지만 테두리와 패딩도 고려합니다. 이제 INPUT은 테두리가없고 패드가 없기 때문에 컨테이너 크기로 확장하는 데 문제가 없습니다. 또한 DIV에는 오버플로가 숨김으로 설정되어 있습니다. 기본적으로 항목은 기본 오버플로가 표시되어 컨테이너 외부로 떨어질 수 있습니다. 이렇게하면 입력이 컨테이너 내부에 유지되고 뚫고 들어 가려고하지 않습니다.
나는 이것을 Chrome과 Fire Fox에서 테스트했습니다. 둘 다이 솔루션을 잘 존중하는 것 같습니다.
업데이트 : 방금 무작위 반대 투표를 받았기 때문에 오버플로를 처리하는 더 좋은 방법은 pricco가 설명하는 CSS3 box-sizing 속성을 사용하는 것이라고 말하고 싶습니다.
.myinput {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}이것은 주요 브라우저에서 꽤 잘 지원되는 것으로 보이며 오버플로 트릭처럼 “해키”되지 않습니다. 그러나이 방법을 사용하는 현재 브라우저에는 몇 가지 사소한 문제가 있습니다 ( http://caniuse.com/#search=box-sizing 알려진 문제 참조 ).
답변
나는이 질문이 3 년이라는 것을 알고 있지만 현재 브라우저에서 문제가 여전히 지속되고 사람들이 여전히 여기에오고 있습니다. 현재 해결책은 calc ()입니다 .
input {
width: calc(100% - 12px); /* IE 9,10 , Chrome, Firefox */
width: -webkit-calc(100% - 12px); /*For safari 6.0*/
}대부분의 최신 브라우저에서 지원됩니다.
답변
문제는 입력 요소 상자 모델 때문입니다. 최근에 모바일 장치에서 입력을 100 %로 유지하려고 할 때 문제에 대한 좋은 해결책을 찾았습니다.
입력을 다른 요소 (예 : div)로 래핑합니다. 그런 다음 입력에 원하는 스타일을 래퍼 div에 적용합니다. 예를 들면 :
<div class="input-wrapper">
<input type="text" />
</div>
.input-wrapper {
border-raius:5px;
padding:10px;
}
.input-wrapper input[type=text] {
width:100%;
font-size:16px;
}입력에 원하는대로 .input-wrapper 둥근 모서리 패딩 등을 제공 한 다음 입력 너비를 100 %로 지정합니다. 입력 내용이 테두리 등으로 멋지게 채워졌지만 성가신 오버플로가 없습니다!
답변
@hallodom의 답변으로 시작 하여이 문제를 해결했습니다. 내 모든 입력은 li에 포함되어 있으므로 초과 입력 오버플로를 제거하기 위해 li overflow : hidden을 설정하기 만하면됩니다.
.ie7 form li {
width:100%;
overflow:hidden;
}
.ie7 input {
width:100%;
}