Question

问题是我的div围绕列表框（选择）+ 文本框（输入文字）+ 按钮（输入提交）对于整个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/

文本框/输入文本元素应该比它长

2 个答案: