1

ブラウザの幅に固定するために入力ボックスに100％の幅を指定しましたが、プレースホルダーを追加すると、入力ボックスがブラウザの幅から外れ、水平スクロールバーが表示されます。スクロールバーを発生させたくありません。何か案が？？

これが私の入力タグです

 <input type="tel" tabindex="9" maxlength="12" placeholder="XXX-XXX-XXXX" value="" name="mobileNumber" />
4

3 に答える 3

0

box-sizing:border-boxこれにはプロパティを使用できます。次のように記述します。

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

このhttp://jsfiddle.net/9rprY/を確認してください。

ただし、IE7以下では動作しません。

于 2012-06-15T06:54:14.203 に答える
0

100％ではなく98％にします。幅を100％に設定すると、コンテンツの幅を意味し、要素が占める合計の幅は、100％+境界線の幅の2倍+パディングの2倍になります。もちろん、98％の値は単なる推測ですが、通常は十分です。

他にも、より良いアプローチがあります。使いやすさのために、表示される幅は予想される通常の入力の幅を反映している必要があるためwidth、HTMLの属性を適切な数に設定するだけで十分です。（値は、予想する番号の種類によって異なります。国際電話番号はかなり長くなる可能性があります。）

于 2012-06-15T07:10:19.847 に答える
0

css3プロパティのボックスサイズを使用すると、外部のパディングと境界線（マージンではない）を含めるために、幅の意味を再定義できます。

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

残念ながら、CSS3であるため、このプロパティはすべてのIEでサポートされているわけではありません（IE6およびIE7はサポートしていません）。あなたはここでそれについてもっと読むことができます：w3schools

于 2012-06-15T07:20:46.093 に答える