폭 100 %가있는 입력 필드가 패딩에 "도달"합니다.

StackOverflow https://stackoverflow.com/questions/5488498

  •  14-11-2019
  •  | 
  •  

문제

I의 입력 필드가있는 식탁보가 있습니다. 입력 필드는 식탁보를 채우지 만 패딩에 도달하지는 않습니다. 내가 이처럼 보이는 것 (Firebug) :

패딩에 도달하는 요소

입력 필드가 파란색 영역 내에 유지되고 보라색으로 raching하지 않으려면

와 : 물론이 주제에서 여기에서 모든 질문을 읽었습니다. 나는 그 모든 것을 읽었고 실제로 해결 된 대답을 찾을 수 없었습니다.

그것은 모든 현대 브라우저에서 일해야합니다 (IE7도 일);

i는 최소한의 라이브 예제 jsfiddle을 사용하여 다른 질문에있는 모든 솔루션을 시도했습니다. 그러나 나는 이것을 일할 수 없었습니다. a) 이 this에 대한 작업 솔루션이 있습니까? 및 b) 이 this에 대한 훌륭하고 비 작동이없는 솔루션이 있습니까?

이런 이유는 모든 브라우저에서 문제가 있습니까? 나는 이것이 CSS에서 잘못된 사양이라고 생각한다. 물론 "100 %"라고 말하면 요소가 콘텐츠 영역의 "100 %"에 맞게 원합니다. 패드와 여백으로 흐르게하는 유스 케이스는 무엇입니까?

도움이 되었습니까?

해결책

Well, here you go..

I'm using the exact same method as this answer.

See: http://jsfiddle.net/AKUsB/

CSS:

.inputContainer {
    background: #fff;
    padding: 3px 3px;
    border: 1px solid #a9a9a9
}
.inputContainer input {
    width: 100%;
    margin: 0; padding: 0; border: 0;
    display: block
}

HTML:

<div class="inputContainer">
    <input type="text" name="company" id="company" value="" class="formInputTextField" style="width: 100%;" />
</div>

다른 팁

The problem here is with the box model, when you say width: 100% it applies a pixel value based on what's available (which you can see under the "computed styles" option of a web inspector). However, padding is then added on to that width, so a padding of 5px would compute to a total width of 100% + 10px (5 for each side).

To fix this problem, you need to remove your padding, or incorporate it into your width value. For example:

input { width: 100%; padding: 0; }

Or

input { width: 90%; padding: 0 5%; } /* width totals 100% */

Most form elements, by default, inherit some amount of padding; so even if you're not specifically applying padding to the input, it's still on there because the browser defaults it to have padding.

I think you should try to use

box-sizing: border-box
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top