如何使用 css 将选项卡和切换按钮放置在同一行？答案

【问题标题】：How to make tabs and toogle button placing in same row using css?如何使用 css 将选项卡和切换按钮放置在同一行？
【发布时间】：2023-02-20 22:33:41
【问题描述】：

如何将选项卡和切换按钮放在同一行中？

请参阅附图，还在下面添加了我的代码。有人可以帮我吗

<mat-tab-group>
  <mat-tab label="Label1">
    <div style="text-align: right; margin-top: 10px">
      <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>
      <br />
      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>

demo

我的 CSS 不好，有人可以建议如何做到这一点。

【问题讨论】：

标签： html css angular-material

【解决方案1】：

（快速修复，在使用之前先看看BUT部分）
添加这两个 css 规则应该会有所帮助：

.mat-tab-group {
  flex-direction: row !important;
}
.ng-trigger-translateTab div {
  margin-top: 0 !important;
}

但：使用!important 是一种不好的做法，覆盖组件的默认行为也是一种不好的做法。（但是，如果没有 !important，上面的 sn-p 将无法工作，因为我们正在尝试重写通用行为）。作为一个好的实践，我建议查看组件内部，并尝试思考如何更改它们的 css 规则，或者可能更好地安排或更正确地嵌套它们，以便它们以您希望的方式显示。

【讨论】：