html - 输入宽度 100% 和边距/填充

Question

如何使用 100% 宽度和边距/填充的输入？？

当输入没有焦点时，宽度比父元素宽 2 个像素，但在焦点上宽度是否正确？这个怎么解决？! :-/

jsfidle

http://jsfiddle.net/eHQSR/1/

代码

input, textarea {
    width:100%;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

input, textarea, button {
    display:inline-block;
    font-family:arial;
    margin:1px;
}

input, textarea {
    background-color:#FFFFFF;
    border:1px solid #297296;

    color:#333333;
    font-size:12px;
    padding:4px 4px;
}

input:focus, textarea:focus {
    border-color:#1a4c91;
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.07), 0 0 6px #7ab5d3;
    border-width:2px;
    margin:0px;
}

<div style="margin-top:20px; margin-left:20px">
    <div style="width:100px; background:red; float:left; margin:1px">
        <input type="text">
    </div>
    <div style="width:100px; background:red; float:left; margin:1px">
        <input type="text">
    </div>
</div>

Answer 1

这是因为您在输入上留有边距，将它们与父元素隔开(不使用 border-box 时情况更糟，但仍然会发生，因为边距不包括在宽度计算中)。

input, textarea, button {
    display:inline-block;
    font-family:arial;
    margin:1px;
}

相反，您可以移除此内边距并在父级上放置 1px 的内边距:http://jsfiddle.net/eHQSR/3/

更新

正如我在下面的评论中所说，来自 :focus 样式的额外边框首先侵 eclipse 了您的页边距，这就是高度保持不变的原因。所以我把边距留在那里，从左边移除边距，然后在父元素的左右两侧添加填充。所以现在宽度应该是正确的，高度不会“改变”，因为它仍然先吃掉上面和下面的边距(但正如我所指出的，如果你把边框做得再大一点，它仍然会改变输入的高度) .如果在某处指定高度，所有这些都会简单得多。

http://jsfiddle.net/eHQSR/5/