テキストフィールドとボタンを画面全体に広げたいのですが、同じ CSS セレクターを使用しているにもかかわらず、テキストフィールドとボタンの長さが同じではありません。
これはコードです: http://jsfiddle.net/AakN4/2/
サファリでは、違いはそれほど大きくありませんが、それでも目に見えます.
結果
定義されたピクセル幅の左
幅 100% の右 (テキストフィールドはボタンと同じ長さである必要があります)。
テキストフィールドとボタンを画面全体に広げたいのですが、同じ CSS セレクターを使用しているにもかかわらず、テキストフィールドとボタンの長さが同じではありません。
これはコードです: http://jsfiddle.net/AakN4/2/
サファリでは、違いはそれほど大きくありませんが、それでも目に見えます.
定義されたピクセル幅の左
幅 100% の右 (テキストフィールドはボタンと同じ長さである必要があります)。
ボックスのサイズを入力に定義します。次のように書きます。
input {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 15pt;
width: 150px;
}
これをチェックしてくださいhttp://jsfiddle.net/AakN4/4/
違いの理由は、デフォルトでinput type="submit"
動作box-sizing
することです。それはそれが完全に含まpadding & border
れており、それが完全に追加されていwidth
ます。input type="text"
padding & border
width