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

Question

所以问题是，在我div周围的列表框（选择）+文本框（输入文本）+按钮（输入提交）中，我拥有width:250px整个 div 以及其中的每个东西width:100%。

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

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

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

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

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

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

---

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

Answer 1

你可以加

box-sizing:border-box;

在#but, #text你的CSS里面，它会正常工作

#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/