使两组按钮在HTML页面中并排放置

我试着把两套（一套有两个按钮，一套只有一个按钮）的按钮并排放置。然而，我的一个按钮是在一个窗体中，所以我不知道怎么做

这是HTML代码：

<form>
     //Some other things
    <div class="wrapper">
    <button ion-button block type="submit" [disabled]="!loginForm.valid">
      Login
    </button>
      </div>
  </form>

<div class="wrapper">

  <button ion-button block clear (click)="goToSignup()">
    New account
  </button>

  <button ion-button block clear (click)="goToResetPassword()">
    Forgot password
  </button>
</div>

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

编辑：

以下是完整的HTML代码：

<form>
     //Some other things
    <div class="wrapper">
    <button ion-button block type="submit" [disabled]="!loginForm.valid">
      Login
    </button>
      </div>
  </form>

<div class="wrapper">

  <button ion-button block clear (click)="goToSignup()">
    New account
  </button>

  <button ion-button block clear (click)="goToResetPassword()">
    Forgot password
  </button>
</div>

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

请输入有效的电子邮件

您的密码需要超过6个字符

登录
新帐户
忘记密码
使用Facebook登录
使用谷歌登录

您可以使用此布局。我已经重组了你的HTML，如果你有任何问题，请告诉我

.wrapper，
.wrapper\u选项{
显示器：flex；
}
.包装形式{
宽度：100px；
显示器：flex；
}
.包装器窗体按钮{
背景：橙色；
颜色：白色；
边界：无；
弹性：1；
光标：指针；
}
.wrapper\u选项{
弯曲方向：立柱；
}
.wrapper\u选项按钮{
背景：透明；
边界：无；
文本对齐：左对齐；
光标：指针；
}

登录
新帐户
忘记密码

类包装器应附加到表单标记。 您需要相应地更改css和html

.wrapper {
  display: inline-block;
}
.wrapper button {
  display: block;
}

<form class="wrapper">

    <div >
    <button ion-button block type="submit" [disabled]="!loginForm.valid">
      Login
    </button>
      </div>
  </form>

<div class="wrapper">

  <button ion-button block clear (click)="goToSignup()">
    New account
  </button>

  <button ion-button block clear (click)="goToResetPassword()">
    Forgot password
  </button>
</div>

.wrapper{
显示：内联块；
}
.包装器按钮{
显示：块；
}
登录
新帐户
忘记密码

您可以对其他按钮使用display:block。注意，其他两个按钮上的type=button，这样他们就不会提交其他两个按钮上的form=button。这是pluncker上的一个有效解决方案

.阻止按钮{
显示：块；
}
.包装纸{
显示：内联块；
}
登录
新帐户
忘记密码

用div包装代码并显示为内联flex

<div class="aa">
<!-- code-->
</div>

---

你需要把这些都包在一个袋子里div@Hash：那么表单也必须包括在内？好的，我已经尝试了您的解决方案，但是按钮出现在表单中的其他内容（2个文本字段）上。这些按钮应显示在文本下方fields@GeorgeW如果看不到完整的HTML，很难为您提供解决方案。你能更新你的问题吗？是的，我现在正在更新。如果你需要支持IE，请小心使用flexbox。它在.aa{ display: inline-flex; }