css - 为什么我的提交按钮位置不正确？

Question

我认为这是一个非常简单的 CSS 问题。

我正在玩 Magento 并学习 CSS(糟糕的组合？)。我正在尝试制作一个 2 行登录框。各自字段上方的电子邮件和密码字段标签，以及输入字段右侧的提交按钮。

唉，无论我怎么尝试，提交按钮最终都会出现在其他地方(主要是在第一行)。我已经这样做了四个小时，我从其他网站阅读了更多代码，但仍然无法正常工作!

.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 {
}

它来自的 HTML(不是我写的，Magento 代码):

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