1
私は、2つのセット（2つのボタンと1つのボタンで1つずつ）のボタンを並べて配置しようとしています。しかし、私のボタンの1つはフォームにあるので、私はどのようにそれを行うのか分かりません。ボタンをテキストフィールドの下に並べて配置する方法は？
これは、HTMLコードです：
<ion-content padding>
<div class="logo">
<div class="logo-icon">
<img src="{{logo}}">
</div>
</div>
<form [formGroup]="loginForm" (submit)="loginUser()" novalidate>
<ion-item>
<ion-input formControlName="email" type="email" placeholder="Email address" [class.invalid]="!loginForm.controls.email.valid && loginForm.controls.email.dirty"></ion-input>
<ion-icon name="ios-mail-outline" item-left></ion-icon>
</ion-item>
<ion-item class="error-message" *ngIf="!loginForm.controls.email.valid && loginForm.controls.email.dirty">
<p>Please enter a valid email.</p>
</ion-item>
<ion-item>
<ion-input formControlName="password" type="password" placeholder="Password" [class.invalid]="!loginForm.controls.password.valid && loginForm.controls.password.dirty"></ion-input>
<ion-icon name="ios-key-outline" item-left></ion-icon>
</ion-item>
<ion-item class="error-message" *ngIf="!loginForm.controls.password.valid && loginForm.controls.password.dirty">
<p>Your password needs more than 6 characters.</p>
</ion-item>
<button ion-button block type="submit" [disabled]="!loginForm.valid">
Login
</button>
</form>
<button ion-button block clear (click)="goToSignup()">
New account
</button>
<button ion-button block clear (click)="goToResetPassword()">
Forgot password
</button>
<button ion-button block class="facebook-btn" (click)="facebookLogin()">
<ion-icon name="logo-facebook" class="icons"> </ion-icon>
Login with Facebook</button>
<button ion-button block class="google-btn" (click)="googleLogin()">
<ion-icon name="logo-google" class="icons"></ion-icon>
Login with Google</button>
</ion-content>This is how I want it to look like
EDIT： はCSSを忘れた：
page-login {
background-size: 100%;
background-position-y: 50%;
.logo {
height: 50%;
width: 100%;
}
.facebook-btn {
background-color: #939393;
margin: auto;
width: 55%;
margin-bottom: 5px;
height: 5%;
}
.google-btn {
background-color: #939393;
margin: auto;
width: 55%;
margin-bottom: 5px;
height: 5%;
}
.norm-login-textfield{
display: block;
text-align: center;
margin: auto;
width: 50%;
margin-bottom: 5px;
height: 5%;
}
.norm-login-field{
background-color: #909090;
display: block;
margin: auto;
width: 55%;
margin-bottom: 5px;
height: 5%;
}
.icons{
margin-right: 10px;
}
.error {
margin-top: 20px;
width: 100%;
text-align: center;
background-color: rgb(217, 74, 87);
p {
color: white;
font-weight: bold;
}
}
.invalid {
border-bottom: 1px solid #FF6153;
}
ion-input {
padding: 5px;
}
}
これはITがWITHどのように見えるかIS SU GGESTED解決 Page
これは、新しいHTMLコードです：
<ion-content padding>
<div class="logo">
<div class="logo-icon">
<img src="{{logo}}">
</div>
</div>
<form [formGroup]="loginForm" (submit)="loginUser()" novalidate>
<ion-item>
<ion-input formControlName="email" type="email" placeholder="Email address" [class.invalid]="!loginForm.controls.email.valid && loginForm.controls.email.dirty"></ion-input>
<ion-icon name="ios-mail-outline" item-left></ion-icon>
</ion-item>
<ion-item class="error-message" *ngIf="!loginForm.controls.email.valid && loginForm.controls.email.dirty">
<p>Please enter a valid email.</p>
</ion-item>
<ion-item>
<ion-input formControlName="password" type="password" placeholder="Password" [class.invalid]="!loginForm.controls.password.valid && loginForm.controls.password.dirty"></ion-input>
<ion-icon name="ios-key-outline" item-left></ion-icon>
</ion-item>
<ion-item class="error-message" *ngIf="!loginForm.controls.password.valid && loginForm.controls.password.dirty">
<p>Your password needs more than 6 characters.</p>
</ion-item>
<button ion-button block type="submit" [disabled]="!loginForm.valid" style="float:left;width:100px;height:50px;background:orange;color:white">
Login
</button>
</form>
<div id="btn">
<button ion-button clear (click)="goToSignup()" style="float:left;">
New account
</button>
<button ion-button (click)="goToResetPassword()">
Forgot password
</button>
</div>
<button ion-button block class="facebook-btn" (click)="facebookLogin()">
<ion-icon name="logo-facebook" class="icons"> </ion-icon>
Login with Facebook</button>
<button ion-button block class="google-btn" (click)="googleLogin()">
<ion-icon name="logo-google" class="icons"></ion-icon>
Login with Google</button>
</ion-content>
CSS：
page-login {
background-size: 100%;
background-position-y: 50%;
.logo {
height: 50%;
width: 100%;
}
button {
padding: 10px;
margin: 7px;
border: none;
}
#btn button {
padding: 3px;
display: block;
clear: both;
}
#btn {
overflow: hidden;
}
.facebook-btn,
.google-btn {
display: block;
clear: both;
border: none;
background: #939393;
}
.norm-login-textfield{
display: block;
text-align: center;
margin: auto;
width: 50%;
margin-bottom: 5px;
height: 5%;
}
.norm-login-field{
display: block;
margin: auto;
width: 55%;
margin-bottom: 5px;
height: 5%;
}
.icons{
margin-right: 10px;
}
.error {
margin-top: 20px;
width: 100%;
text-align: center;
background-color: rgb(217, 74, 87);
p {
color: white;
font-weight: bold;
}
}
.invalid {
border-bottom: 1px solid #FF6153;
}
button {
padding: 10px;
margin: 7px;
border: none;
}
#btn button {
display: block;
clear: both;
}
#btn {
overflow: hidden;
}
ion-input {
padding: 5px;
}
}
あなたが試したコードを貼り付けてください。次に、コード内の問題を修正するための答えを出します。 – weBBer
あなたはCSSコードを持っていませんか？ – Core972
X2列：ログインボタンは＃1、アカウントアクションリンクは＃2です。列が 'form'要素内にあることを確認してください。それがあなたの構造です。残りはスタイリングにすぎず、スムーズなセーリングが必要です（これを実証するためにオンラインでたくさんの例があります）。 – UncaughtTypeError