Входное поле с шириной 100% "достигает" в прокладку
-
14-11-2019 - |
Вопрос
У меня есть скатерть с входным полем в нем. Входное поле должно заполнить скатерс, но не добраться до его прокладки. Что я выгляжу так (с Firebug):
Я хочу, чтобы входное поле хранить внутри синего района и не рачь в фиолетовый.
И: Конечно, я прочитал все вопросы здесь, на эту тему. Я прочитал все это, и я не смог найти никакого ответа, который на самом деле решил это.
Он должен работать во всех современных браузерах (IE7);
Я сделал Минимальный живой пример с jsfiddle, где я пробовал все решения в других вопросах Но я просто не мог заставить это работать. а)
Почему это проблема во всех браузерах? Я думаю, что это неверная спецификация в 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