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

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

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

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

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