Question

关于CSS和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进行测试。

Answer 1

您可以将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。

输入元素填充剩余宽度

1 个答案: