输入内的填充中断宽度100％

好的，所以我们知道即使对对象设置填充也会导致其宽度发生变化，即使它是明确设置的也是如此。尽管可以争论其背后的逻辑，但这会导致某些元素出现问题。

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

看一下这个：http : //sandman.net/test/formcss.html

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

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

有什么方法可以在输入中添加填充，同时又保持宽度100％？由于表格将以不同宽度的父级呈现，因此它必须为100％，所以我事先不知道父级的宽度。

使用CSS3，您可以使用属性box-sizing来更改浏览器计算输入宽度的方式。

  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+ */
  }

您可以在此处了解更多信息：http : //css-tricks.com/box-sizing/

我不知道它与跨浏览器的兼容性如何（它可以在Firefox和Safari中使用），但是您可以尝试以下解决方案：

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

（仅发布我更改的值）

一种选择是将包裹INPUT在DIV具有填充的内。

CSS：

div.formvalue {
    background-color: #eee;
    border: 1px solid red;
    padding: 10px;
    margin: 0px;
}

div.paddedInput {
    padding: 5px;
    border: 1px solid black;
    background-color: white;
}

div.paddedInput input {
    border: 0px;
    width: 100%;
}

HTML：

<div class="formvalue">
    <div class="paddedInput"><input type="text" value="Padded!" /></div>
</div>

经常被遗忘的calc可以在这里进行救援：

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

由于我们知道填充会增加元素的宽度，因此我们只需从整体宽度中减去填充即可。所有主要浏览器都支持它，具有响应能力，并且不需要凌乱的包装div。

我遇到了与此类似的问题。我的tds输入为100％，填充很小。我所做的是补偿td上的填充，如下所示：

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

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

8px的填充，以包括输入/​​文本区域的边框和填充。希望这可以帮助！

也许将border + background取下input，然后将其div用border + background和width：100％括起来，并在input？上设置边距？

我发现有效的一种解决方案是使用相对定位的父标记来绝对定位输入。

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

适用风格：

p.full-width-input {
    position: relative;
    height: 35px;
}

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

唯一需要注意的是，段落标记需要设置高度，因为其绝对定位的子代不会扩展其高度。这样避免了width: 100%通过将其锁定在父元素的左侧和右侧进行设置的需要。

尝试使用百分比进行填充：

.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%; 

}

如果您担心使用旧浏览器的用户看不到方框阴影，只需为输入提供细微的背景色作为备份。如果您将像素用于这种事情，那么您可能会在其他地方使用它们，这可能会带来一些额外的挑战，如果遇到它们，请告诉我。

我唯一想防止这种情况的就是分配类似100％-10的值。但是它有一些兼容性问题。