如何在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;
}