如何在h1旁边放置一个mat-form-field？

Question

我正在尝试将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问题。

感谢您的帮助！

Answer 1

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

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

Answer 2

添加此CSS

IEnumerator FadeOut()
{
    fadeValueOut = 1f;

    while (fadeValueOut >= -1f)
    {
        color = FadeSphere.material.color;
        color.a = fadeValueOut;
        FadeSphere.GetComponent<Renderer>().material.SetColor("_Color", color);
        fadeValueOut -= 0.1f;
        yield return new WaitForSeconds(0.001f); //Make the coroutine faster?
    }      
}

Answer 3

您可以像这样在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>