如何在 mat-form-field 元素的下划线 类 之间添加 space？

Question

我正在尝试添加多个表单域，我想连续添加 2 个表单域，但我无法在表单域之间添加 space（无法分隔下划线）

 <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

我想 space 在 "what's your name" 和 "hello" 之间

我怎样才能做到这一点？ 任何帮助将不胜感激！

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