输入元素填补剩余宽度

有提出关于CSS &剩余宽度已经有很多的问题。阅读完后，我仍然有一个问题，我无法修复。当试图让输入元素用尽剩余宽度时，它总是比其包含的div宽4px。输入元素填补剩余宽度

<!DOCTYPE html> 
<html> 
<body> 
    <div> 
     <div style='float:left; margin-right:10px;'>Hello:</div> 
     <div style='overflow:hidden'><input style='width:100%'/></div> 
    </div> 
</body> 
</html>

input元素总是4个像素太宽而不能显示其右边界。如果我设置输入的margin-left到-4px变得可见，但则不会显示的左边框。

使用Chrome测试这一点。

来源

2012-09-13 Tin

我们能看到你的CSS吗？ – Kyle

上面的代码已完成。在这个简化的例子中，我使用了'style'属性和一个单独的CSS文件。你可以将它粘贴到jsfiddle中。 – Tin

但是在CSS中没有太多的建议你有一个“填充剩余空间”解决方案？ – Kyle

你可以添加box-sizing: border-box;您input，以避免溢出。它的基本功能是在设置width: 100%时将考虑边框和填充。请注意，你必须包括几个供应商前缀为不同的浏览器：

.myinput { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    border: 2px solid orange; /*just to make border more clear*/ 
    width: 100%; 
}

小演示：little link。

来源

2012-09-13 13:08:25 Chris

工程就像一个魅力！ – Tin

输入元素填补剩余宽度

回答

相关问题