2

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

1 に答える 1

1

これは、入力にマージンがあり、親要素から間隔を空けているためです（border-boxを使用しない場合はさらに悪化しますが、マージンが幅の計算に含まれないため、引き続き発生します）。

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 に答える