2

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

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

js文件

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>
4

1 回答 1

1

这是因为您在输入上的边距，将它们与父元素隔开（不使用边框框时会更糟，但仍然会发生，因为边距不包括在宽度计算中）。

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

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

更新

正如我在下面的评论中所说， :focus 样式的额外边框首先会占用您的边距，这就是高度不变的原因。所以我把边距留在那里，从左边删除边距，然后在父级的左右添加填充。所以宽度现在应该是正确的，高度不会“改变”，因为它仍然会先进入上下边缘（但正如我所指出的，如果你让边框变大，它仍然会改变输入的高度） . 在某处指定高度，所有这些都会简单得多。

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

于 2012-11-07T19:54:03.883 回答