Mat-Select下拉列表与选择元素分离

Question

我是新手，尝试使用mat-select设置下拉菜单。出于某种原因，当您单击元素以打开选项时，它们将显示在左侧其他页面内容之后，如下图所示（这是我选择“类”时的情况）：

所有position / display均为默认设置，因此我不确定还有哪些因素会影响其定位。这是相关的代码片段

HTML

<div class="character-detail-header">
          <mat-form-field>
            <mat-label>Class:</mat-label>
            <mat-select formControlName="characterClass" [errorStateMatcher]="matcher">
              <mat-option *ngFor="let charClass of classes" [value]="charClass">{{charClass}}</mat-option>
            </mat-select>
            <mat-error>
              <span *ngIf="!characterForm.get('characterClass').valid && characterForm.get('characterClass').touched">Please enter Class</span>
            </mat-error>
          </mat-form-field>
    <!-- Continued -->
</div>

SCSS

mat-label {
  color: black;
  width: 25%;
  font-size: 1rem;
  float: left;
}

mat-select,
input {
  width: 50%;
  float: right;
  text-align: right;
}
.character-name-header {
      width: 30%;
      float: left;
      border: 1px solid black;

      mat-form-field {
        width: 100%;
      }
    }
    .character-detail-header {
      padding: 1rem;
      width: 60%;
      float: right;
      border: 1px solid black;
      text-align: center;

      mat-form-field {
        width: 28%;
        height: 2rem;
        margin: 0 1rem;
      }
    }

Answer 1

（最新）更新：需要重新启动角度服务器才能查看更改。