2

テキストフィールドとボタンを画面全体に広げたいのですが、同じ CSS セレクターを使用しているにもかかわらず、テキストフィールドとボタンの長さが同じではありません。

これはコードです: http://jsfiddle.net/AakN4/2/

サファリでは、違いはそれほど大きくありませんが、それでも目に見えます.

結果

定義されたピクセル幅の左
幅 100% の右 (テキストフィールドはボタンと同じ長さである必要があります)。

http://i.minus.com/jUbh0W0aVWFMl.png

4

1 に答える 1

3

ボックスのサイズを入力に定義します。次のように書きます。

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 & borderwidth

于 2012-08-01T09:34:37.107 に答える