CSSフォームの整列

Question

ログインフォームを作成しようとしていますが、テキストフィールドと送信ボタンが正しく整列していません。現在、私のページには、テキストフィールドの数ピクセル下にある送信ボタンが表示されています。

これは次のようになります。 [テキストフィールド] [テキストフィールド] [BUTTON]

誰もがこの問題で私を助けることができる、私はCSSに新しいです

...

HTML：

<form name='loginform' id='loginform' action='logincheck.php' method='post' > 
<input type='text' name='user_login' id='user_login' class='login-header' value='Username'> 
<input type='password' name='user_pass' id='user_pass' class='login-header' value='password'><label style='color:#ffffff;'> 
<input type='submit' name='login' id='login' value='Log In' tabindex='100' class='login-button' > 
</form> 

CSS：

.login-header { 
border : 1px solid Black; 
background-color : #CCCCCC; 
color : #0E1930; 
font-size : 12px; 
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; 
font-weight : bold; 
height: 2em; 
} 
.login-button { 
border : 1px solid Black; 
background-color : #CCCCCC; 
color : #0E1930; 
font-size : 12px; 
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; 
font-weight : bold; 
padding:4px 10px; 
} 

Answer 1

これは私が思っていたよりも厳しくなった。私はいくつかのCSSの変更と追加の後に同じように見えるIEとFirefoxを得ることができました。まず入力のサイズにemとpxの両方を使用しています。 height: 2em;のスタイルをpadding: 4px 0;に変更しました。最も難しい部分は、なぜファイアフォックスがテキスト入力よりも送信入力の方が大きい内側のパディングを持っていたのかを把握することでした。私はこれを次のように追加して解決しました：

input::-moz-focus-inner 
{ 
    border: 0; 
    padding: 0; 
} 

今は同じように見えます。ここに例を設定しました：http://jsfiddle.net/GhFvB/

Answer 2

あなたはdisplay:inline;を試しましたか？

Answer 3

私はChrome/Safari & IE9の修正版でjsfiddleを作成しました。これは、うまくいけば、それが助けに私のFirefox（V7.0.1）

http://jsfiddle.net/2gEK3/6/

のために罰金レンダリングされました。 :)

（クローム/サファリ（Webkitの）変更はCSSであるPS。IE9の変更はIEが条件付きの場合を使用して、HTMLエリアである。、私はそこにそれを認識している。）