Angular 4 Material组件横向排列问题求助（前端新手）

嘿，我来帮你搞定这个Angular Material组件同行显示的问题！其实Angular Material本身没有mat-group-element这类专门的同行布局指令，但我们有更简单可靠的方法来实现需求，不用纠结不存在的指令~

方法一：用原生Flexbox布局（推荐，无额外依赖） #

你之前尝试的inline-block可能没生效，大概率是因为Angular Material的组件容器（比如<mat-form-field>）默认是display: block，直接给内部类设置样式根本不起作用。我们可以用Flexbox来包裹所有组件，轻松实现横向排列：

先修改你的HTML结构，用一个flex容器把所有组件包起来：

<form class="sqltool-form">
  <div class="component-row">
    <!-- 你的第一个Material组件 -->
    <mat-form-field class="sqltool-input">
      <input matInput placeholder="请输入内容">
    </mat-form-field>

    <!-- 你的第二个Material组件 -->
    <mat-form-field class="sqltool-select">
      <mat-select placeholder="请选择">
        <mat-option value="opt1">选项1</mat-option>
        <mat-option value="opt2">选项2</mat-option>
      </mat-select>
    </mat-form-field>

    <!-- 你的第三个Material组件 -->
    <mat-slide-toggle class="sqltool-toggle">
      开关组件
    </mat-slide-toggle>
  </div>
</form>

然后在CSS里设置flex容器的样式：

/* 横向排列子元素，垂直居中对齐 */
.component-row {
  display: flex;
  align-items: center;
  /* 可选：给组件之间加间距 */
  gap: 16px;
  padding: 8px 0;
}

/* 可选：让输入框/下拉框自适应宽度，平分可用空间 */
.sqltool-input, .sqltool-select {
  flex: 1;
}

/* 可选：小屏幕下自动换行，适配移动端 */
@media (max-width: 600px) {
  .component-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

方法二：用Angular Flex Layout库（少写CSS） #

如果你不想自己写太多布局CSS，可以用官方的Angular Flex Layout库，它提供了一系列指令来快速实现响应式布局。不过注意Angular 4对应的版本是@angular/flex-layout@2.x，先安装依赖：

npm install @angular/flex-layout@2.0.0-beta.12 --save

然后在模块里导入FlexLayoutModule：

import { FlexLayoutModule } from '@angular/flex-layout';

@NgModule({
  imports: [
    // 其他导入...
    FlexLayoutModule
  ]
})
export class MainComponentModule { }

之后就可以用指令直接在HTML里布局：

<form class="sqltool-form" 
      fxLayout="row" 
      fxLayoutAlign="center center" 
      fxLayoutGap="16px">
  <mat-form-field fxFlex>
    <input matInput placeholder="请输入内容">
  </mat-form-field>
  <mat-form-field fxFlex>
    <mat-select placeholder="请选择">
      <mat-option value="opt1">选项1</mat-option>
      <mat-option value="opt2">选项2</mat-option>
    </mat-select>
  </mat-form-field>
  <mat-slide-toggle>开关组件</mat-slide-toggle>
</form>

这两种方法都能完美实现你的需求，推荐先试试第一种原生Flexbox的方式，不需要额外依赖，灵活性也更高~

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