文本框/输入的文本元素超过它应该是

所以问题是，在我的div周围列表框（选择）+ 文本框（输入文本）+ 按钮（输入提交）我有width:250px整个div和它里面的每个东西我都有width:100%。文本框/输入的文本元素超过它应该是

这让我认为他们应该逻辑上填充该div内的空间。但问题是，文本框（小提琴中的输入文本）会更长一些（或其他元素更短？）。

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

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

更新：感谢检举这是重复的，但你能告诉我是的交代了答案：

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

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

在我的整个代码中所有的div我有某种这意味着如果你觉得他们没用，他们不是！

来源

2013-08-27 Ms. Nobody

类似问题http://stackoverflow.com/questions/628500/can-i-stop-100-width-text-boxes-from-extending-beyond-their-containers –

border a nd填充...和重复。 – MikeSmithDev

由于浏览器添加了默认填充和边框，因此文本框更长。 – otinanai

您可以添加

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/

来源

2013-08-27 14:00:49

嗯，不知道为什么，但你的小提琴显示与我的相同的结果 - 文本框仍然更宽:( –

这就是我的jsFiddle如何显示当我打开给定的链接，是不是所需的？ –

它是什么浏览器？ –

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

来源

2013-08-27 13:57:27 Frisbetarian

文本框/输入的文本元素超过它应该是

回答

相关问题