宽度为100%“到达”的Inputfield填充
-
14-11-2019 - |
题
我有一个带有Intnfield的桌面。 Inputfield应该填满TableCell但没有达到其填充。我所看到的那样(用Firebug):
我希望输入域保持在蓝色区域内,而不是将紫色的区域保持在紫色。
和:当然我首先阅读此主题的所有问题。我读完了它,我找不到任何实际解决的答案。
它应该在所有现代浏览器中工作(IE7也是如此);
我制作了一个 minimal live example 用jsfiddle我在其他问题中尝试了所有解决方案但我只是无法做到这一点。 a)在那里有一个工作解决方案吗?和b)甚至有一个很好的和非工作服的解决方案?
为什么这是所有浏览器中的问题?我认为这是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