输入内的填充打破宽度 100%答案

【问题标题】：Padding within inputs breaks width 100%输入内的填充打破宽度 100%
【发布时间】：2010-11-25 13:12:55
【问题描述】：

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

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

看看这个：

body {
  font-size: 14px;
  margin: 0px;
  padding: 0px;
}

DIV.formfield {
  clear: both;
  margin: 0px;
  padding: 10px;
}

DIV.formlabel {
  margin-top: 20px;
  padding: 5px;
  font-weight: bold;
  text-align: left;
}

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

DIV.formvalue.correct {
  border: 1px solid green;
}

textarea.textarea {
  width: 100%;
  min-height: 80px;
}

input.input {
  width: 100%;
  padding: 5px;
}

input.input2 {
  width: 100%;
}

input.input3 {
  width: 100%;
  padding: 5px;
  margin: -5px;
}

input.input4 {
  width: 100%;
  padding: 10px;
  margin: -10px;
}

input.input5 {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

<div class='formfield' id='field_text'>
  <div class='formlabel'>No padding</div>
  <div class='formvalue'>
    <textarea class='textarea' cols='80' rows='10' name='text'>No padding here</textarea>
  </div>
  <div class='formlabel'>Also no padding</div>
  <div class='formvalue'>
    <input type='text' class='input2' name='apa' value='Or here...' />
  </div>
  <div class='formlabel'>5px padding, which extends the parent element, d'oh!</div>
  <div class='formvalue'>
    <input type='text' class='input' name='apa' value='I dont want to extend outside the square!' />
  </div>
  <div class='formlabel'>5px padding and -5px margin, this does the trick, almost...</div>
  <div class='formvalue'>
    <input type='text' class='input3' name='apa' value='I dont want to extend outside the square!' />
  </div>

  <div class='formlabel'>10px padding and -10px margin, things are falling apart on the right side</div>
  <div class='formvalue'>
    <input type='text' class='input4' name='apa' value='I dont want to extend outside the square!' />
  </div>

  <div class='formlabel'><img src="/bilder/icons/badges/ok.png" width="16" height="16" border="0"> 10px padding and box-sizing: border-box</div>
  <div class='formvalue correct'>
    <input type='text' class='input5' name='apa' value='I dont want to extend outside the square!' />
  </div>
</div>

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

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

有什么方法可以在输入中添加填充，同时仍然保持 100% 的宽度？它需要为 100%，因为表单将以不同宽度的父级呈现，所以我事先不知道父级的宽度。

【问题讨论】：

查看stackoverflow.com/questions/628500/…了解如何使用CSS3 box-sizing属性

标签： css input padding

【解决方案1】：

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

input.input {
    width: 100%;
    box-sizing: border-box;
}

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

【讨论】：

【解决方案2】：

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

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

因为我们知道内边距会增加元素的宽度，所以我们只需从总宽度中减去内边距。它受到所有主要浏览器的支持，响应迅速，并且不需要凌乱的包装 div。

【讨论】：

如果您知道输入中使用的内边距和边距，您还可以执行 calc(100% - 12px) 之类的操作，在此示例中，边距和内边距加起来为 12px。

【解决方案3】：

尝试使用百分比作为填充：

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

}

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

【讨论】：

【解决方案4】：

我发现一个可行的解决方案是使用相对定位的父标记绝对定位输入。

<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% 锁定在父元素的左侧和右侧来设置width: 100% 的需要。

【讨论】：

【解决方案5】：

我遇到了一些与此类似的问题。我有 100% 的输入和一个小填充的 tds。我所做的是补偿 td 上的填充，如下所示：

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

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

8px 的内边距，包括输入/文本区域的边框和内边距。希望这会有所帮助！

【讨论】：

此技术非常适合将包含填充输入的单元格的宽度与不包含填充输入的单元格对齐。只需将填充权选择性地应用于任何包含 100% 宽度输入的 TD。

【解决方案6】：

也许从input 中取出边框+背景，而是将其包含在div 中，边框+背景和宽度：100%，并在input 上设置边距？

【讨论】：

这是我目前用于解决此问题的那种 hack，但出于“样式原因”或诸如此类的原因，我宁愿在输入上使用边框。但是，是的，这就是我目前的做法，这是一个可行的解决方案

【解决方案7】：

一种选择是将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>

【讨论】：

填充容器 div 会产生与向输入字段添加填充不同的结果。
添加到 Felix Fung 所说的内容——您失去了在填充区域中单击鼠标并使其聚焦输入字段的能力——以及其他更值得注意的问题。只是想指出这个鲜为人知/已知的问题——在使用使用这种 hack 的网页时，它让我很恼火。

【解决方案8】：

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

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

（仅发布我更改的值）

【讨论】：

嗯，这并没有让我大吃一惊:) 不要认为有一个简单的跨浏览器解决方案而不更改标记。
好的，我现在投票赞成这个解决方案，因为添加 margin:-5px 显然不是违规行为。我已经向使用它的页面添加了第四个输入，它似乎确实有效。 jigsaw.w3.org/css-validator/…

【解决方案9】：

我唯一知道要防止这种情况的就是分配像 100%-10 这样的值。但它有一些兼容性问题。

【讨论】：