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

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只是为了得到代码

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/