Css 输入中的填充将断开宽度100%

好的，所以我们知道为对象设置填充会导致其宽度改变，即使它是显式设置的。虽然人们可以争论这背后的逻辑，但它会导致某些元素出现一些问题

在大多数情况下，只需添加一个子元素并向该子元素添加填充，而不是将其设置为100%，但对于表单输入，这是不可能的

看看这个：

第二个输入的padding设置为5px，这是我非常喜欢的默认设置。但不幸的是，这使得输入在各个方向上都增加了10px，包括在100%宽度上增加10px

这里的问题是，我无法在输入中添加子元素，因此无法修复它。因此，问题是：

---

有没有办法在保持宽度100%的同时在输入中添加填充？它需要是100%，因为表单将以不同宽度的父对象呈现，所以我事先不知道父对象的宽度。

我唯一知道的防止这种情况的方法是指定100%-10这样的值。但是它有一些兼容性问题。

我不知道它的跨浏览器兼容性如何（它在firefox和safari中工作），但您可以尝试以下解决方案：

DIV.formvalue {
padding: 15px;
}
input.input {
margin: -5px;
}

---

（仅发布我更改的值）

也许可以从

输入中去掉边框+背景，而是将其包含在一个
div中，边框+背景和宽度为100%，并在
输入中设置一个边距
输入？
一个选项是将
输入
包装在一个有填充的
div中

CSS:

HTML:

类似的问题一直困扰着我。我有100%输入的tds和一个小填充。我所做的是补偿td上的填充，如下所示：

.form td {
    padding-right:8px;
}

.form input, .form textarea {
    border: 1px solid black;
    padding:3px;
    width:100%;
}

8px的填充，包括输入/文本区域的边框和填充。
希望这有帮助
 我发现的一个解决方案是使用相对定位的父标记绝对定位输入

<p class="full-width-input">
    <input type="text" class="text />
</p>

唯一需要注意的是段落标记需要设置高度，因为其绝对定位的子项不会扩展其高度。通过将其锁定在父元素的左侧和右侧，可以避免设置宽度：100%
。
使用CSS3，您可以使用属性框大小来更改浏览器计算输入宽度的方式

您可以在此处阅读更多信息：
尝试使用百分比作为填充：

.input { 

  // remove border completely
  border: none;

  // don't forget to use the browser prefixes
  box-shadow: 0 0 0 1px silver;

  // Use PERCENTAGES for at least the horizontal padding
  padding: 5%; 

  // 100% - (2 * 5%)
  width: 90%; 

}

如果您担心旧浏览器上的用户看不到方框阴影，只需给输入一个微妙的背景颜色作为备份即可。如果你使用像素来做这类事情，那么你很可能在其他地方使用它们，这可能会带来一些额外的挑战，如果你遇到它们，请告诉我。
经常被遗忘的
计算可以在这里解决：

input {
  width: calc(100% - 1em);
  padding: 0.5em;
}

因为我们知道填充将增加元素的宽度，所以我们只需从总宽度中减去填充。它受所有主流浏览器的支持，响应迅速，不需要凌乱的包装div。
好吧，这并不让我感到惊讶：）不要认为有一个简单的跨浏览器解决方案不改变标记。好吧，我现在投票支持这个解决方案，因为添加边距：-5px显然不是违法的。我已经在页面中添加了第四个输入，它使用了这个功能，看起来确实有效。这就是我目前在解决这个问题时使用的一种破解方法，但我更愿意在输入上使用border，因为“样式原因”或诸如此类的原因。但是，是的，这就是我目前所做的。这是一个可行的解决方案。请看如何使用CSS3
框大小属性。我必须说，感谢您一直保持示例页面的更新。当有人在问题中发布一个url，并且在答案被回答后它就关闭了，或者他们没有使用类似JSFIDLE的东西时，这让我抓狂；我的问题与此相同，但高度设置为100%意味着高度+边框+填充=容器高度。要获得输入以获得容器的实际高度，我只需要使用box size:content-box。除了我刚才所说的在IE中不起作用外，IE11中的box size:content-box根本不使用height:100%调整高度。它确实尊重特定的px高度。因此，高度：31px不带盒子大小比高度：31px+盒子大小：内容盒小6px。但这个想法是使用高度：100%，所以我不担心具体的像素大小！这项技术非常适用于将包含填充输入的单元格宽度与不包含填充输入的单元格宽度对齐。。只需有选择地对任何包含100%宽度输入的TD应用填充。填充容器div会产生与将填充添加到输入字段不同的结果。除其他更值得注意的问题外，Felix Fung还说，你失去了在填充区域单击鼠标并使其聚焦输入字段的能力。我只是想指出一个不太为人所注意/所知的问题——当我使用使用这种黑客的网页时，它会让我非常恼火。@Víctor Dieppa Garriga谢谢，这是一个很好的解决方案。支持如下：Chrome（任意）：box sizing Opera 8.5+：box sizing Firefox（任意）：-moz box sizing Safari 3:-webkit box sizing（未在5.1+版本中修复）IE8+：盒子大小。我还建议大家接受这个答案，这是一个更优雅的解决方案。为了澄清IE上的框大小支持，因为IE框大小属性取决于IE文档模式，它适用于“IE8标准模式”及更高版本。因此，如果文档模式为“IE8标准模式”，它也将在IE8浏览器版本中工作。希望这有帮助，
框大小：边框框
是我想到的第一件事，但它绝对不适合我。也许是曾祖父母的
显示：flex
正在处理这个问题吗？看起来它在所有没有前缀的主流浏览器中都受支持，并且已经有好几年了：这可能是最好的解决方案。
p.full-width-input {
    position: relative;
    height: 35px;
}

p.full-width-input input.text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 5px;
}

  input.input {
    width: 100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
  }

.input { 

  // remove border completely
  border: none;

  // don't forget to use the browser prefixes
  box-shadow: 0 0 0 1px silver;

  // Use PERCENTAGES for at least the horizontal padding
  padding: 5%; 

  // 100% - (2 * 5%)
  width: 90%; 

}

input {
  width: calc(100% - 1em);
  padding: 0.5em;
}