CSS是否可以將提交按鈕與輸入字段對齊？

Question

目前我得到：

我試圖對準輸入欄的按鈕即可顯示像

（注：我可以加保證金左：40像素的按鈕CSSS描述，但我不知道這是最好的選擇）：

與FOLL由於模板和SCSS

LoginPage.vue

<template> 
    <div class="login-page"> 
    <h1 class="title">Login to existing account</h1> 
    <form @submit.prevent="login()" class="form form--login grid"> 
     <div class="row"> 
     <label for="login__email">Email</label> 
     <input type="text" id="login__email" class="input--block" v-model="email" /> 
     </div> 
     <div class="row"> 
     <label for="login__password">Password</label> 
     <input type="password" id="login__password" class="input--block" v-model="password" /> 
     </div><!-- /.row --> 
     <div class="row"> 
     <button type="submit">Login</button> 
     </div><!-- /.row --> 
    </form> 
    </div><!-- /.login-page --> 
</template> 

<style lang="scss" scoped> 
    .login-page { 
    form { 
     .row { 
     padding-top: 5px; 
     label { 
      display: inline-block; 
      width: 140px; 
      text-align: right; 
     } 
     input { 
      display: inline-block; 
      text-align: left; 
     } 
     } 
    } 
    } 
</style> 

Answer 1

如果你不希望給在提交按鈕margin。你可以給label提交按鈕。

檢查：提交按鈕的排<label></label>：

<div class="login-page"> 
    <h1 class="title">Login to existing account</h1> 
    <form @submit.prevent="login()" class="form form--login grid"> 
     <div class="row"> 
     <label for="login__email">Email</label> 
     <input type="text" id="login__email" class="input--block" v-model="email" /> 
     </div> 
     <div class="row"> 
     <label for="login__password">Password</label> 
     <input type="password" id="login__password" class="input--block" v-model="password" /> 
     </div><!-- /.row --> 
     <div class="row"> 
     <label></label> 
     <button type="submit">Login</button> 
     </div><!-- /.row --> 
    </form> 
    </div><!-- /.login-page --></code> 

我只加有一個新的生產線。這就是爲什麼它可能需要像其他領域一樣的寬度。