爲什麼我的提交按鈕位置不正確？

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

爲什麼我的提交按鈕位置不正確？

回答

相關問題