Question

我在菜单上有问题，我到处都看过，但是什么也没用。我正在尝试添加页边空白，但从未支持此页边。

navbar-no-mobile.component.html

<div class="pull-right">
  <button class="btn-language" mat-icon-button [matMenuTriggerFor]="menu">
    <mat-icon [ngClass]="{'flag-francais': isFrench, 'flag-english': !isFrench}"></mat-icon>
    <a lang="{{language}}">{{language}}
      <fa-icon class="chevron_white" aria-hidden="true" [icon]="faChevronDown"></fa-icon>
    </a>
  </button>
  <mat-menu class="flag-menu" #menu="matMenu">
    <button mat-menu-item (click)="switchToEnglish()">
      <mat-icon class="flag-english"></mat-icon>
      <span lang="english">English</span>
    </button>
    <button mat-menu-item (click)="switchToFrench()">
      <mat-icon class="flag-francais"></mat-icon>
      <span lang="français">Français</span>
    </button>
  </mat-menu>
</div>

navbar-no-mobile.component.scss

/deep/ .cdk-overlay-container .flag-menu {
  margin-top: 4em;
}

我还尝试过将CSS放在整个CSS（styles.scss）中，并用.flag-menu反转.cdk-overlay-container或使用::ng-deep代替/deep/，但是也行不通。

Answer 1

为我工作：

::ng-deep .cdk-overlay-container .flag-menu {
  margin-top: 3rem;
}

检查堆栈闪电：https://stackblitz.com/edit/mat-menu-xruuog

如果它不适合您，请为您的代码创建stackblitz。

角度垫菜单边距

1 个答案: