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

我正在玩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>

任何意见，将不胜感激。

来源

2011-12-10 aussie_aj

您可以在按钮上方使用简单的'
'。 –

当你问客户端问题，如CSS，发布你的PHP与你的HTML混合是没有用的。发布您在浏览器中看到的内容。 – mrtsherman

@mrtsherman欢呼声修复了现在。 –

表有什么问题？

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

来源

2011-12-10 06:15:46

这不是真正的表格数据。我认为桌子造型是一个好主意。他可以使用'display：table;'和'display：table-cell;' – mrtsherman

“桌子有什么问题？”没有表格数据，这是在这里使用表格的问题。 –

在这里你去花花公子，这应该做到这一点。只是在您的按钮上添加了一个负左边距和顶边距http://jsfiddle.net/jalbertbowdenii/dXYE5/

至于magento和css是一个糟糕的组合，根本不是。他们携手并进。

来源

2011-12-10 07:15:32 albert

作为一种变体：

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

玩弄块宽度您可以自定义表单。

来源

2011-12-10 07:33:39

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

回答

相关问题