Angular Material标签页左侧添加按钮的布局适配问题

针对你遇到的两个问题，用Flex布局就能完美解决，既避免按钮和标签重叠，又能让标签内容全屏显示：

调整后的代码 #

<div style="display: flex; align-items: center;">
  <button mat-icon-button style="margin-right: 16px;">
    <mat-icon>menu</mat-icon>
  </button>
  <mat-tab-group style="flex: 1;">
    <mat-tab label="First"> Content 1 </mat-tab>
    <mat-tab label="Second"> Content 2 </mat-tab>
    <mat-tab label="Third"> Content 3 </mat-tab>
  </mat-tab-group>
</div>

关键调整说明 #

• 用display: flex的容器包裹按钮和标签组，让它们在同一行排列，且标签组自动填充剩余空间
• 移除按钮的position: fixed和外层div的float: left，避免定位冲突导致的重叠
• 给按钮添加margin-right: 16px，拉开和第一个标签的间距，防止误触
• 给mat-tab-group设置flex: 1，让它占据容器内除按钮外的全部宽度，这样标签内容自然会全屏显示

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