Material Dialog item 對齊問題

General
1

由於在stackBlitz 出來的効果跟在local 的不一樣,我只好將source code 放在這裡.

我的問題是在popupModal.component.html裡:

<h2 mat-dialog-title>{{title}}</h2>
<div>
<mat-dialog-content [formGroup]="myForm">
    <mat-form-field>
      <input matInput
             placeholder="Text1 Description"
             formControlName="description">
    </mat-form-field>
      <mat-select placeholder="Select category" formControlName="category">
        <mat-option value="BEGINNER">Beginner</mat-option>
        <mat-option value="INTERMEDIATE">Intermediate</mat-option>
        <mat-option value="ADVANCED">Advanced</mat-option>
      </mat-select>
        <mat-checkbox formControlName="yesNo"> I'm a checkbox</mat-checkbox>
</mat-dialog-content>
<mat-dialog-actions>
  <button mat-raised-button type="submit" color="primary" class="Update-btn" (click)="save()">Save</button>
  <button mat-raised-button type="button" class="Discard-btn" (click)="closeDialog()">Close</button>
</mat-dialog-actions>

請問如何將所有item 放在同row 上呢?

2

你的所有 item 指的是…？

3

所有包括:
mat-form-field,mat-select,mat-checkbox

最後我發現這個mat-select 不知為什麼它闊度很大,所以不可以其他東西放在同一個row.

4

這是樣式設定的問題