0

已经有很多关于 CSS 和剩余宽度的问题。阅读它们后，我仍然有一个无法解决的问题。当试图让输入元素用完剩余的宽度时，它总是比其包含的div.

<!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 对此进行了测试。

4

1 回答 1

4

您可以添加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%;
}

小演示：小链接。

于 2012-09-13T13:08:25.173 回答