3

我有一个 Tablecell，里面有一个 Inputfield。Inputfield 应该填满 Tablecell，但不能达到它的填充。我所拥有的看起来像这样（带有萤火虫）：

表单元素进入填充

我希望输入字段保持在蓝色区域内，而不是进入紫色区域。

并且：当然，我首先阅读了关于这个主题的所有问题。我阅读了所有内容，但找不到任何实际解决该问题的答案。

它应该适用于所有现代浏览器（也适用于 ie7）；

我用 jsfiddle 做了一个最小的实时示例，我尝试了其他问题中的所有解决方案，但我就是无法让它工作。a)有没有可行的解决方案？b）是否有一个很好的非解决方法？

为什么这在所有浏览器中都是一个问题？我认为这是 CSS 中的错误规范。因为如果我说“100%”当然我希望元素适合“100%”的内容区域。让它流入填充和边距的用例是什么？

4

3 回答 3

6

嗯，给你。。

我正在使用与此答案完全相同的方法。

见：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>
于 2011-03-31T09:27:23.337 回答
3

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.

于 2011-03-30T15:46:58.390 回答
1

我认为你应该尝试使用

box-sizing: border-box
于 2017-09-08T07:38:32.657 回答