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>

Answer 2

你在这里去老兄，这应该这样做。只是在按钮http://jsfiddle.net/jalbertbowdenii/dXYE5/

上添加了一个负左边距和一个上边距

至于magento和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>

使用宽度为块的游戏，您可以自定义表单。

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

3 个答案: