Angular Material 如何实现自定义div与mat-label同行显示

API 探路者

2026-10-25

自定义div与mat-label同行显示实现方案

问题根源

默认自定义div、mat-label均为块级元素，且当前代码中三个元素无统一行容器约束，会自动换行排布；同时mat-form-field自带的默认边距、内部预留的label空间也会干扰对齐效果。

调整HTML结构

将需要同行的自定义div和mat-label包裹在同一个头部容器中，代码如下：

<!-- 新增头部行容器 -->
<div class="form-field__header">
  <div class="container__irr--holding">
    <span>موجودی ریالی:</span>
    <span>100,000,000</span>
  </div>
  <mat-label>پرداختی</mat-label>
</div>

<mat-form-field appearance="fill">
  <!-- 保留原有表单内部代码 -->
</mat-form-field>

适配SCSS样式

在对应组件的样式文件中添加如下代码，实现同行排布、对齐适配：

// 新增头部容器样式，实现同行排布
.form-field__header {
  display: flex;
  align-items: center; // 垂直居中对齐，可根据需求调整为flex-start
  gap: 8px; // 两个元素的间距，可按需调整
  margin-bottom: 4px; // 适配下方mat-form-field的顶部间距
}

// 保留原有自定义div样式，可补充优化细节
.container__irr--holding {
  display: flex;
  background: #465490;
  padding: 2px 6px; // 补充左右内边距优化视觉效果
  border-radius: 3px;
  color: #fff; // 深色背景搭配浅色文字，可按需修改
  gap: 4px;
}

// 覆盖mat-label默认样式，消除行间距错位
mat-label {
  margin-bottom: 0;
  font-size: 12px; // 匹配Angular Material默认label字号
  color: rgba(0, 0, 0, 0.6); // 与默认label颜色保持一致
}

// 适配mat-form-field默认预留空间，避免整体错位
// 新版本Angular Material（含MDC）适用如下类名：
mat-form-field.appearance-fill .mat-mdc-form-field-flex {
  padding-top: 0;
}
// 旧版本Angular Material（无MDC）请替换为如下代码：
// mat-form-field.appearance-fill .mat-form-field-flex {
//   padding-top: 0;
// }