文本框/输入文本元素长于应有的长度

Question

所以问题是在我的div 周围 listbox(select) + textbox(input text) + button(input submit ) 我有整个 div 的 width:250px 和里面的每个东西我有 width:100%。

这让我假设他们应该在逻辑上填充该 div 内的空间。但问题是文本框（小提琴中的输入文本）有点长（或者其他元素更短？）。

任何想法为什么以及如何解决这个问题？

演示： http://jsfiddle.net/xXVHu/15/

更新：感谢您将此标记为重复，但您能告诉我解释的答案在哪里：

为什么输入 - 文本更宽但输入 - 不提交？

另外我想说的是我需要它在IE8中工作，不要问我为什么......

---

在我的整个代码中，我拥有的所有 div 都有某种意义，所以如果你觉得它们没用，那它们就不是！

Answer 1

你可以添加

box-sizing:border-box;

到你的css中的#but, #text，它会正常工作

#but, #text
{
    display:inline-block;   
    width: 100%; 
    box-sizing:border-box;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;
}

jsFiddle : http://jsfiddle.net/xXVHu/20/

Answer 2

尝试应用 box-sizing。在计算元素的长度时，此属性将考虑边框和填充。 http://css-tricks.com/box-sizing/