3

入力フィールドを 100% に設定すると、それらを含む div が常に「オーバーラン」するのはなぜですか?

css、

.item-form {
    margin:0px 0px 10px 0px;
    clear:both;
    border:1px solid #999966;
} 

.item-form  input,  
.item-form textarea,
    {
    background-color:#ffffff;
    border: 1px solid #dddddd; 
    width:100%;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    padding:2px 2px 2px 2px;
}

html、

<div class="item-form">
    <input name="username" type="text" id="username" value="" title="USER NAME"/>
</div>

出力、 ここに画像の説明を入力

どうすれば修正できますか??

ありがとう。

編集：

入力フィールドの問題を修正したようですが、別の問題に遭遇しました - select field、

.item-form {
    margin:0px 0px 10px 0px;
    padding:0px 6px 0px 0px; /** important **/
    clear:both;
    }

.item-form select{
    border: 1px solid #dddddd; 
    width:100%; /** a bug to fix **/
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    padding:2px 2px 2px 2px;
    color:#999;
    }

現在、選択フィールドは「アンダーラン」です!!

ここに画像の説明を入力

これを修正するにはどうすればよいですか??

ありがとう。

4

2 に答える 2

1

入力の幅を 100% にし、両側に 2px のパディングと 1px の境界線を追加しています。その結果、6px 幅が広すぎる入力になります。

修正するには、親要素にパディングを追加して、入力に使用できる幅を制限する必要があります。この場合、6pxの右パディングを に追加し.item-formます。

.item-form {
    padding-right: 6px;
} 

.item-form input,  
.item-form textarea {
    width: 100%;
    padding: 2px;
}

上記のルール (100% 幅にはパディングが含まれます) に従わないため、select は奇妙なものです。したがって、親の幅を制限したくありません。したがって、秘訣は、入力とテキストエリアの周りにパディングのあるラッパー要素のみを配置し、選択の周りには配置しないことです。

ピクセル パーフェクトな位置合わせについては、この例を参照してください。

于 2011-03-31T03:14:06.330 に答える
0

outlineの代わりに使用してくださいborder。border境界線のためのスペースを作るという点でレイアウトに影響します。outlineエッジをストローク（またはアウトライン）するだけで、位置は変更されません。両側に2つの1ピクセルの境界線があり、2ピクセル上に表示されるため、2ピクセル上になります。

于 2011-03-31T03:35:31.573 に答える