Html 如何在h1旁边放置mat表单字段？

我试图把h1放在角材料的垫状场旁边，但我很难做到这一点

以下是我迄今为止所做的尝试：

<div class="mat-elevation-z8">
  <mat-form-field>
    <mat-label>Select an option</mat-label>
    <mat-select [(value)]="selected" (selectionChange)="greet($event)">
      <mat-option value="none">None</mat-option>
      <mat-option value="lime">Lime</mat-option>
      <mat-option value="red">Red</mat-option>
      <mat-option value="yellow">Yellow</mat-option>
    </mat-select>
  </mat-form-field>

<h1>{{products.length}} Telefonnummern</h1>

...

</div>

有人能指出我做错了什么吗

我还没有接触css，我认为这是一个html问题

谢谢你的帮助

添加此css

.mat-elevation-z8 {    
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: space-between;
    -webkit-justify-content: space-between;    
}

---

将此样式添加到组件css文件：

mat-form-field{
  float:left;
  width:50%;
}
H1{
  float:left;
  width:50%;
}

---

您可以像这样在div上使用flex属性

<div style="display: flex;">
  <mat-form-field>
    <mat-label>Select an option</mat-label>
    <mat-select [(ngModel)]="selected" #yearSelect2>
      <mat-option value="none">None</mat-option>
      <mat-option value="lime">Lime</mat-option>
      <mat-option value="red">Red</mat-option>
      <mat-option value="yellow">Yellow</mat-option>
    </mat-select>
  </mat-form-field>

<h1>Telefonnummern</h1>

...

</div>

---

在父分区上使用样式显示：flex。您能提供一些详细信息吗？