<div>中的<input />占用了右侧的额外空间</div>

Question

我在div元素中有一个输入元素：

...
<div id="calculator-container">
    <input type="text" />
</div>
....

在CSS中，我将输入宽度设为100％：

#calculator-container {
    border: 1px solid black;
    background-color: lightgrey;
    width: 200px;
    padding: 10px;
}

#calculator-container input {
    width: 100%;
}

我无法弄清楚为什么输入右侧的可用空间少于左侧（请参见下面的屏幕截图）。也许有人可以提供建议。感谢。

---

指出在jsfiddle上它看起来很好但是如果你在本地复制它在IE和Firefox中看起来都很糟糕。这是jsfiddle链接，因此您可以复制代码：jsfiddle just to get the code

Answer 1

这是因为width表示元素的内容区域的宽度。 <input>的内容区域由其填充和边框包围。

• http://jsfiddle.net/3f7RB/

如果您将其设置为0，则输入不会占用更多空间：

input {
    width: 100%;
    border-style: none;
    padding: 0;
}

• http://jsfiddle.net/3f7RB/1/

（当然，表单元素通常与常规元素略有不同，因此不同的浏览器可能会做不同的事情。）

如果你想在<input>上填充，你也可以将其声明为百分比：

input {
    width: 96%;
    border-style: none;
    padding: 4px 2%;
}

• http://jsfiddle.net/3f7RB/5/

或使用box-sizing（在IE 6或7中不支持），以便width: 100%适用于<input>的内容，填充和边框合并：

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

• http://jsfiddle.net/3f7RB/6/

Answer 2

因为输入元素的width:100%为200px。然而，这并没有考虑到它的边界为2px，这意味着它实际上应该是196px。 试试这个： http://jsfiddle.net/QLFrj/

#calculator-container input {
    width: 196px;
}

唯一的问题是它不再是一个百分比......

Answer 3

由于border导致它正确的原因，因为width的{​​{1}}意味着input field。width of input field is 100% + 2px所以，你可以使用box-sizing属性得到这个：

检查

http://jsfiddle.net/3f7RB/4/

或

您也可以使用outline属性。像这样：

检查

http://jsfiddle.net/3f7RB/7/

Answer 4

我在这里试过，它运行正常。也许另一个CSS语句会覆盖div或输入的某些属性。您可以尝试使用Firebug（在Firefox上）或Google Chrome上检查元素。

Answer 5

这是因为你的输入元素也想要200px。 width: 100%适用于父元素。在这种情况下，#calculator-container。