Question

我正在尝试设计一种表单，该表单具有一个输入字段，在它旁边是一个按钮。但是，我将按钮置于输入字段的顶部。

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

有没有办法使两个元素在一条线上接一个？

谢谢

Answer 1

我找到了解决我问题的答案。有两种方法：

通过CSS将显示设置为“内联”
使用Flexbox并为需要内联的两个元素创建一个容器

Answer 2

我做了这样的事情

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

并在scss下面添加了以保持输入字段和行内保存按钮

form {
 display: flex;

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

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

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

一样

Angular / Material

2 个答案: