144

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

在大多数情况下，您只需添加一个子元素并将填充添加到该元素而不是设置为 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，包括将 10px 添加到 100% 宽度。

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

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

4

9 回答 9

313

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

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

你可以在这里阅读更多关于它的信息：http: //css-tricks.com/box-sizing/

于 2012-12-17T16:29:20.230 回答
7

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

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

（仅发布我更改的值）

于 2009-09-04T07:39:29.547 回答
7

一种选择是将具有填充INPUT的 a包装起来。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>
于 2009-09-04T07:50:22.800 回答
7

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

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

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

于 2017-09-30T04:34:46.743 回答
4

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

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

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

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

于 2011-11-01T15:17:19.240 回答
2

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

于 2009-09-04T07:44:37.197 回答
1

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

<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%通过将其锁定在父元素的左侧和右侧来设置的需要。

于 2012-03-16T11:56:35.767 回答
0

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

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

}

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

于 2013-01-30T21:28:53.157 回答
-3

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

于 2009-09-04T07:35:44.670 回答