Angular Material中如何实现多个Input组件同行布局？

你遇到的问题核心在于给mat-form-field加了example-full-width类——这个类默认会把元素宽度设为100%，导致两个输入框各自占满一行自动换行。下面给你几个实用的解决方案，结合Angular Material和可选的Bootstrap来实现：

方案1：用Flexbox布局（推荐） #

Flexbox是实现横向布局最灵活的方式，不管依赖Bootstrap与否都能轻松搞定：

结合Bootstrap的写法 #

<form class="example-form d-flex gap-3">
  <mat-form-field style="flex: 1;">
    <input matInput placeholder="First Name">
  </mat-form-field>
  <mat-form-field style="flex: 1;">
    <input matInput placeholder="Last Name">
  </mat-form-field>
</form>

• d-flex是Bootstrap的flex容器类，让子元素横向排列
• gap-3用来设置两个输入框之间的间距
• flex:1让两个输入框平分容器的可用宽度，也可以换成固定宽度比如width: 48%

纯CSS写法（不依赖Bootstrap） #

如果不想用Bootstrap，自己写几行CSS就能实现：

<form class="example-form">
  <mat-form-field>
    <input matInput placeholder="First Name">
  </mat-form-field>
  <mat-form-field>
    <input matInput placeholder="Last Name">
  </mat-form-field>
</form>

.example-form {
  display: flex;
  gap: 1rem; /* 输入框之间的间距 */
}

.example-form mat-form-field {
  flex: 1; /* 让两个输入框平分容器宽度 */
  /* 也可以设置固定宽度：width: 220px; */
}

方案2：用Angular Material的Grid组件 #

如果你习惯使用Angular Material的组件体系，可以用mat-grid-list实现规整的网格布局：

<mat-grid-list cols="2" gutterSize="1rem" rowHeight="auto">
  <mat-grid-tile>
    <mat-form-field>
      <input matInput placeholder="First Name">
    </mat-form-field>
  </mat-grid-tile>
  <mat-grid-tile>
    <mat-form-field>
      <input matInput placeholder="Last Name">
    </mat-form-field>
  </mat-grid-tile>
</mat-grid-list>

• cols="2"指定一行显示2列
• gutterSize="1rem"设置列之间的间距
• rowHeight="auto"让行高自适应输入框的高度

关键注意点 #

一定要移除原来的example-full-width类，或者用自定义CSS覆盖它的宽度设置：

.example-full-width {
  width: auto !important; /* 或者设置具体宽度值 */
}

内容的提问来源于stack exchange，提问作者Rubyen