如何在文本字段下并排放置按钮组？

时间：2017-07-21 13:23:26

标签： html css

我试图将两个按钮（一个有两个按钮，一个只有一个按钮）并排放置。但是，我的一个按钮是一个表单，所以我不知道该怎么做。

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

编辑： 忘了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;
  }


}

这就是它与推荐的解决方案相比如何： 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;
  }


}

1 个答案:

答案 0 :(得分：0)

尝试这个

button {
  padding: 10px;
  margin: 7px;
  border: none;
}

.facebook-btn,
.google-btn {
  display: block;
  clear: both;
  border: none;
  background: grey;
}

#btn button {
  padding: 3px;
  display: block;
  clear: both;
  background: #ddd;
}

#btn {
  overflow: hidden;
}
<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>

相关问题
最新问题