Как поместить поле mat-form рядом с h1?

Question

Я пытаюсь поставить h1 рядом с полем формы мата (из angular материала), но я борюсь с этим.

Вот что я пробовал до сих пор:

<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 file:

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

Answer 2

Вы можете использовать свойство flex на div, например,

<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>

Answer 3

Добавить 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;    
}