如何用CSS将Angular Material的Tabs与Toggle按钮置于同一行？

步骤1：调整HTML结构 #

把Toggle按钮从Tab内容区域移出，和mat-tab-group放在同一个容器内，让它们成为同级元素：

<div class="tab-with-toggle-container">
  <mat-tab-group>
    <mat-tab label="Label1">
      <div style="margin-top: 10px">
        You have selected : {{ toggleGroup1.value }}
      </div>
      test 1
    </mat-tab>
    <mat-tab label="Label2"> test 2 </mat-tab>
    <mat-tab label="Label3"> test3 </mat-tab>
  </mat-tab-group>

  <mat-button-toggle-group #toggleGroup1="matButtonToggleGroup">
    <mat-button-toggle value="Angular Material UI">
      Angular Material UI
    </mat-button-toggle>
    <mat-button-toggle value="React Material UI">
      React Material UI
    </mat-button-toggle>
  </mat-button-toggle-group>
</div>

步骤2：添加CSS样式 #

在组件的样式文件（.component.css）中添加以下样式，通过Flex布局实现同行排列：

.tab-with-toggle-container {
  display: flex;
  align-items: center;
  gap: 16px; /* 选项卡和Toggle之间的间距 */
}

.tab-with-toggle-container mat-tab-group {
  flex: 1; /* 让选项卡占满容器剩余宽度 */
}

/* 可选：微调Toggle按钮垂直位置，和选项卡标签对齐更自然 */
.tab-with-toggle-container mat-button-toggle-group {
  margin-top: 8px;
}

效果说明 #

• 外层容器用flex布局实现横向排列，让选项卡和Toggle按钮处于同一行
• flex:1确保选项卡组件占据容器剩余空间，Toggle按钮固定在右侧
• 可通过调整gap和margin-top的值，适配自己的布局间距需求

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