Angular 角度/材质中的内联形状元素

我试图设计一个表单，它有一个输入字段，旁边有一个按钮。然而，我得到了输入字段顶部的按钮

<mat-form-field>
  <input matInput placeholder="Select Spec Folder">
  <button mat-raised-button >Select Folder</button>
</mat-form-field>

选择文件夹

有没有办法让两个元素一个接一个地在同一行上

---

谢谢，我找到了问题的答案。 有两种方法可以做到这一点：

通过CSS将显示设置为“内联”

通过使用Flexbox并为需要内联的两个元素创建一个容器

---

我做了这样的事

    <form #form="ngForm">
      <mat-form-field>
        <input matInput placeholder="Name" maxlength="8" minlength="5" required
               #name>
      </mat-form-field>
      <button mat-icon-button type="submit" color="accent" aria-label="Save name">
        <mat-icon>check</mat-icon>
      </button>
    </form>

在我的例子中，我只有一个输入和一个按钮。如果您有多个表单字段，请将它们分组到一个div中，并向其添加flex，并设置子元素的宽度，就像我对表单及其子元素所做的那样

form {
 display: flex;

 mat-form-field {
  width: 80%;
  padding: 5px;
 }

 button {
  width: 25px;
  margin: auto;
 }
}