带有 mat-nav-list 的 Angular Material 扩展面板的对齐问题

Question

我使用 mat-nav-list 来显示菜单项，第四个菜单项是 Angular Material Expansion 控件。我在这里缺少对齐方式。下面是它的截图。

编辑

相关代码如下..

如何将图标对齐到菜单列表的左侧？如何纠正？

Answer 1

我试图重现该错误：

该问题是由以下原因造成的：

1. mat-expansion-panel-header

   元素默认设置了

   padding: 0 24px;

   ，而

   mat-list-item

   元素默认设置了

   padding: 0 16px;

   。
2. 您没有将

   border-collapse: collapse;

   CSS 添加到

   table

   。

另外，将

<table border="1" width="200px">

更改为

<table border="0" width="200px">

。

列表概述示例.ts

import { Component } from '@angular/core';
import { MatListModule } from '@angular/material/list';
import { MatIconModule } from '@angular/material/icon';
import { MatExpansionModule } from '@angular/material/expansion';

/**
 * @title Basic list
 */
@Component({
  selector: 'list-overview-example',
  templateUrl: 'list-overview-example.html',
  standalone: true,
  imports: [MatListModule, MatIconModule, MatExpansionModule],
})
export class ListOverviewExample {}

列表概述-example.html

<mat-list role="list">
  <a mat-list-item role="listitem">
    <mat-icon>accessibility</mat-icon>
    <span>User 1</span>
  </a>
  <a mat-list-item role="listitem">
    <mat-icon>accessibility</mat-icon>
    <span>User 2</span>
  </a>
  <a mat-list-item role="listitem">
    <mat-icon>accessibility</mat-icon>
    <span>User 3</span>
  </a>
  <a>
    <mat-accordion class="mat-accordion-setting">
      <mat-expansion-panel hideToggle>
        <mat-expansion-panel-header>
          <mat-panel-title matTooltip="User 4 Title" style="text-align: left">
            <table border="0" width="200px">
              <tr>
                <td style="padding-left: 0px; padding-right: 0px">
                  <mat-icon class="mat-accordion-setting"
                    >accessibility</mat-icon
                  >
                </td>
                <td class="mat-panel-title-setting">User 4 Title</td>
              </tr>
            </table>
          </mat-panel-title>
        </mat-expansion-panel-header>
        <div>
          <mat-panel-description
            id="submenu1"
            class="mat-panel-description-setting"
            ><a>Submenu 1</a></mat-panel-description
          >
          <mat-panel-description
            id="submenu2"
            class="mat-panel-description-setting"
            ><a>Submenu 2</a></mat-panel-description
          >
          <mat-panel-description
            id="submenu3"
            class="mat-panel-description-setting"
            ><a>Submenu 3 </a></mat-panel-description
          >
        </div>
      </mat-expansion-panel>
    </mat-accordion>
  </a>
</mat-list>

styles.scss

.mat-expansion-panel-header {
  padding: 0 16px !important;
}

table {
  border-collapse: collapse;
}

输出：

查看现场演示。