CSS 是否可以将提交按钮与输入字段对齐?
CSS Is it possible to align a submit button with input fields?
目前我得到:
我正在尝试将按钮与输入字段对齐,以便像这样显示
( 注意:我可以在按钮 css 描述中添加 margin-left: 40px,但我不确定这是最好的选择 ) :
使用以下模板和 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>
如果您不想在提交按钮中输入margin
。您可以为提交按钮提供 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>
我只在提交按钮这一行添加了一行:<label></label>
。这就是为什么它可以像其他字段一样采用宽度。
目前我得到:
我正在尝试将按钮与输入字段对齐,以便像这样显示
( 注意:我可以在按钮 css 描述中添加 margin-left: 40px,但我不确定这是最好的选择 ) :
使用以下模板和 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>
如果您不想在提交按钮中输入margin
。您可以为提交按钮提供 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>
我只在提交按钮这一行添加了一行:<label></label>
。这就是为什么它可以像其他字段一样采用宽度。