提出ボタンの位置が正しくないのはなぜですか？

Question

これは本当にシンプルなCSSに関する質問です。

私はMagentoで遊んでいて、CSSを学んでいます（悪い組み合わせですか？）。私は2行のログインボックスを作ろうとしています。電子メールとパスワードフィールドのラベルは、それぞれのフィールドの上に表示され、送信ボタンは入力フィールドの右側に表示されます。

私が送信ボタンを試しても、（ほとんどの場合、最初の行に）終了ボタンが表示されます。私はこれを4時間続けてきました。私は他のウェブサイトからより多くのコードを読んでいますが、まだそれを動作させることはできません！

.block-login { 
float:right; 
width:530px; 
} 

.block-login.block-content { 
} 

.mini-login-input { 
float:left; 
margin-right:20px; 
height:100% 
} 

.mini-login-input.label { 
} 

.block-login.button { 
} 

それは（Magentoのコード、私が書かれていない）から来ているHTML：

<div class="block-login"> 

<form action="http://magento.local/customer/account/loginPost/" method="post"> 
    <div class="block-content"> 
     <div class="mini-login-input"> 
      <label for="mini-login">Email:</label><br /><input type="text" name="login[username]" id="mini-login" class="input-text" /> 
     </div> 
     <div class="mini-login-input"> 
      <label for="mini-password">Password:</label><br /><input type="password" name="login[password]" id="mini-password" class="input-text" /> 
     </div> 

     <div class="actions"> 
      <button type="submit" class="button"><span><span>Login</span></span></button> 
     </div> 
    </div> 
</form> 

何かアドバイスをいただければ幸いです。

Answer 1

テーブルに問題がありますか？

<table> 
    <tr> 
     <td>Email box here</td> 
     <td rowspan="2" style="vertical-align: middle;">Login button here</td> 
    </tr> 
    <tr> 
     <td>Password box here</td> 
    </tr> 
</table> 

Answer 2

ここであなたはおいしいです、これはそれを行う必要があります。あなたのボタンに負の左マージンと上マージンを追加しましたhttp://jsfiddle.net/jalbertbowdenii/dXYE5/

マゼンタとcssは悪い組み合わせですが、まったくありません。彼らは手を携えて行く。変形例として

Answer 3

：

.block-login { 
    float:right; 
    width:530px; 
} 

.block-login.block-content { 
    width:80%; 
    display:inline-block; 
    margin:0; 
    padding:0; 
} 

.mini-login-input { 
    float:left; 
    margin-right:20px; 
    height:100% 
} 

.mini-login-input>label {display:block} 

.actions { 
    display:inline-block; 
    width:20%; 
} 

.button {vertical-align:middle} 

<div class="block-login"> 

<form action="http://magento.local/customer/account/loginPost/" method="post"> 
    <div class="block-content"> 
     <div class="mini-login-input"> 
      <label for="mini-login">Email:</label><input type="text" name="login[username]" id="mini-login" class="input-text" /> 
     </div> 
     <div class="mini-login-input"> 
      <label for="mini-password">Password:</label><input type="password" name="login[password]" id="mini-password" class="input-text" /> 
     </div> 
    </div> 
     <div class="actions"> 
      <button type="submit" class="button"><span><span>Login</span></span></button> 
     </div> 
</form> 
</div> 

劇ブロックの幅を持つ、あなたのフォームをカスタマイズすることができます。