如何在 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。我分叉了你的 stackblitz。这是众多解决方案之一：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;
}