Angular Material扩展面板标题对齐：用CSS替代空格实现

步骤1：清理HTML中的硬编码空格 #

先删除User 2文本前的所有 ，避免用空格实现对齐：

<mat-nav-list>
  <a mat-list-item role="listitem" class="list-item-setting" id="emailTemplatesId" matTooltipPosition="right"
    routerLinkActive="active">
    <mat-icon class="list-item-setting">email</mat-icon>
    <span class="nowrap">User 1</span>
  </a>
  <a>
    <mat-accordion>
      <mat-expansion-panel hideToggle [(expanded)]="panelOpenState">
        <mat-expansion-panel-header>
          <mat-panel-title style="text-align: left">
            <mat-icon class="list-item-setting">email</mat-icon>
            <span class="list-item-setting align-text">User 2</span>
          </mat-panel-title>
        </mat-expansion-panel-header>
        <div>
          <mat-panel-description class="mat-panel-description-setting"><a class="list-item-setting" routerLinkActive="active">Submenu 1</a></mat-panel-description>
          <mat-panel-description class="mat-panel-description-setting"><a class="list-item-setting" routerLinkActive="active">Submenu 2</a></mat-panel-description>
          <mat-panel-description class="mat-panel-description-setting"><a class="list-item-setting" routerLinkActive="active">Submenu 3</a></mat-panel-description>
        </div>
      </mat-expansion-panel>
    </mat-accordion>
  </a>
</mat-nav-list>

步骤2：用精准CSS选择器设置padding #

Angular Material组件自带默认样式，普通类选择器优先级不足，需要结合组件类提升优先级：

/* 统一User1文本与图标的间距 */
.mat-list-item .nowrap {
  padding-left: 16px;
}

/* 给User2文本设置左padding，匹配User1的对齐效果 */
.mat-panel-title .align-text {
  padding-left: 16px;
  color: white;
}

/* 保留原有样式，移除冲突的!important声明 */
.list-item-setting {
  padding: 0;
  color: white;
}

问题原因 #

你的.list-item-setting类优先级低于Angular Material内置的mat-panel-title、mat-expansion-panel-header样式，导致padding设置被组件默认样式覆盖。通过添加更精准的选择器（结合组件自带类），可以确保自定义样式生效。

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