Question

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

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

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

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

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

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

Answer 1

使用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/

Answer 2

我不知道它是如何与浏览器兼容（它适用于firefox和safari），但你可以尝试这个解决方案：

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

（仅发布我更改的值）

Answer 3

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

Answer 4

我遇到过与此类似的问题。我有100％的输入和一个小填充。我所做的是补偿td上的填充如下：

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

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

填充8px以包含输入/ textarea的边框和填充。希望这有帮助！

Answer 5

经常被遗忘的input { width: calc(100% - 1em); padding: 0.5em; }可以在这里拯救：

std::string line;

// Keep reading lines of text from the file.
// Break out of the loop when there are no more lines in the file.
while (getline(inputfile, line)){

   // Construct a istingstream from the line of text. 
   std::istringstream ss(line);

   // Read the numbers from the istingstream.
   // Process the numbers as you please.
}

由于我们知道填充将增加元素的宽度，我们只需从总宽度中减去填充。它受到所有主流浏览器的支持，具有响应性，并且不需要凌乱的包装器。

Answer 6

也许从input取下边框+背景，然后将其封闭在div边框+背景和宽度：100％，并在input上设置边距？

Answer 7

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

<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%锁定到父元素的左侧和右侧来设置{{1}}。

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

}

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

Answer 9

只有我知道要防止这种情况才能分配100％-10之类的值。但它有一些兼容性问题。

输入内的填充打破宽度100％

9 个答案: