Angular 形成相同的行字段

Question

我在 angular 的项目中有这种格式，我想将红色字段放在同一行中。我想对果岭做同样的事情。

代码是这样的。我该怎么做；

<!-- BUY PRICE -->
  <div class="form-group">
  <mat-form-field appearance="outline">
    <mat-label>Buy price</mat-label>
    <input matInput formControlName="buy_price" placeholder="Enter buy price">
    <span matPrefix>€&nbsp;</span>
  </mat-form-field>
  </div>

  <!-- FIRST BID -->
  <div class="form-group">
    <mat-form-field appearance="outline">
      <mat-label>First Bid Price</mat-label>
      <input matInput formControlName="first_bid" placeholder="Enter 1st bid price">
      <span matPrefix>€&nbsp;</span>
    </mat-form-field>
  </div>

<!--LOCATION-->
<div class="form-group">
  <mat-form-field appearance="outline">
    <mat-label>Location(City,Region)</mat-label>
    <input matInput formControlName="location" placeholder="Enter location">
  </mat-form-field>
</div>

<!-- COUNTRY -->
<div class="form-group">
  <mat-form-field appearance="outline">
    <mat-label>Country</mat-label>
    <mat-select  formControlName="country">
      <ng-container *ngFor="let country of countries">
        <mat-option  [value]="country.name">{{country.name}}</mat-option>
      </ng-container>
    </mat-select>
  </mat-form-field>
</div>

Answer 1

如果你将你想要的两个 form-group div 包裹在同一行上 div 并应用 display: flex 然后 flex-grow: 1 和 flex-basis:50% 每个 form-group divs - 你会把它们放在同一条线上。

请注意，以下是您的 post 中的代码 - 因此不起作用，因为我没有所需的 md 代码等 - 但相关的 div 是水平对齐的在同一行上，我在它们周围加了边框，这样您就可以看到 flex 样式的效果。

.form-group-wrapper {
  display: flex;
  margin-bottom:16px;
}

.form-group-wrapper .form-group{
  flex-grow: 1;
  flex-basis: 50%;
  padding: 8px;
  border: solid 1px red;
}

<div class="form-group-wrapper">
  <!-- BUY PRICE -->
  <div class="form-group">
  <mat-form-field appearance="outline">
    <mat-label>Buy price</mat-label>
    <input matInput formControlName="buy_price" placeholder="Enter buy price">
    <span matPrefix>€&nbsp;</span>
  </mat-form-field>
  </div>

  <!-- FIRST BID -->
  <div class="form-group">
    <mat-form-field appearance="outline">
      <mat-label>First Bid Price</mat-label>
      <input matInput formControlName="first_bid" placeholder="Enter 1st bid price">
      <span matPrefix>€&nbsp;</span>
    </mat-form-field>
  </div>
</div>
<div class="form-group-wrapper">
  <!--LOCATION-->
  <div class="form-group">
    <mat-form-field appearance="outline">
      <mat-label>Location(City,Region)</mat-label>
      <input matInput formControlName="location" placeholder="Enter location">
    </mat-form-field>
  </div>

  <!-- COUNTRY -->
  <div class="form-group">
    <mat-form-field appearance="outline">
      <mat-label>Country</mat-label>
      <mat-select  formControlName="country">
        <ng-container *ngFor="let country of countries">
          <mat-option  [value]="country.name">{{country.name}}</mat-option>
        </ng-container>
      </mat-select>
    </mat-form-field>
  </div>
</div>

Angular 形成相同的行字段

Angular form same line fields

angular

forms