Как добавить пространство между подчеркнутыми классами в элементах mat-form-field?

Question

Я пытаюсь добавить несколько полей формы, я хотел добавить 2 поля формы подряд, но я не могу добавить пробел между полями формы (не могу отделить подчеркивание)

 <li>
    <mat-form-field>
      <input matInput [(ngModel)]="name" placeholder="What's your name?">
    </mat-form-field>
    <mat-form-field>
      <input matInput [(ngModel)]="name" placeholder="hello">
    </mat-form-field>
  </li>

Stackblitz: https://stackblitz.com/edit/angular-rqczqy

Я хочу иметь пробел между "как тебя зовут" и "привет"

Как мне этого добиться?Любая помощь будет принята с благодарностью!

Answer 1

Вы можете решить эту проблему, используя flexbox.Я раздвоил твой стекВот одно из многих решений: Inline matInput

Шаблон

<li class="mat-form-field--inline">
    <mat-form-field>
      <input matInput [(ngModel)]="name" placeholder="What's your name?">
    </mat-form-field>
    <mat-form-field>
      <input matInput [(ngModel)]="name" placeholder="hello">
    </mat-form-field>
  </li>

CSS

.mat-form-field--inline {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.mat-form-field--inline .mat-form-field {
    display: inline-block;
    width: 100%;
    vertical-align: middle;
}

.mat-form-field--inline .mat-form-field:nth-child(1) {
    margin-right: 10px;
}