jsfidle

Question

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

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

jsfidle

码

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

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

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

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

更新

正如我在下面的评论中所说，焦点样式的额外边界首先进入你的边缘，这就是为什么高度不变的原因。所以我在那边留下了边距，从左边移除了边距，然后在父母的左边和右边添加了边距。所以宽度现在应该是正确的，高度不会“改变”，因为它仍然首先进入上下边缘（但正如我所说，如果你使边界更大，它仍会改变输入的高度）。所有这些都会在某处具有指定高度时更加简单。

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

输入宽度100％和边距/填充

jsfidle

码

1 个答案:

更新