Angular Material中切换按钮组中按钮的对齐方式答案

【问题标题】：Alignment of buttons in toggle button group in Angular MaterialAngular Material中切换按钮组中按钮的对齐方式
【发布时间】：2020-01-26 03:46:29
【问题描述】：

我正在尝试制作一个材质工具栏，里面有几个材质按钮。我想对齐左侧的第一个按钮，并在工具栏的右侧放置三个按钮。我正在尝试从 CSS 中实现这一点，但无法做到。

<mat-toolbar color="primary">
    <mat-toolbar-row>
      <mat-button-toggle-group #group="matButtonToggleGroup">
        <mat-button-toggle value="left" aria-label="Text align left">
          <mat-icon>format_align_left</mat-icon>
        </mat-button-toggle>
        <mat-button-toggle value="center" aria-label="Text align center">
          <mat-icon>format_align_center</mat-icon>
        </mat-button-toggle>
        <mat-button-toggle value="right" aria-label="Text align right">
          <mat-icon>format_align_right</mat-icon>
        </mat-button-toggle>
        <mat-button-toggle value="justify" aria-label="Text align justify">
          <mat-icon>format_align_justify</mat-icon>
        </mat-button-toggle>
      </mat-button-toggle-group>
</mat-toolbar-row>
</mat-toolbar>

<div class="example-selected-value">Selected value: {{group.value}}</div>

【问题讨论】：

mat-button-toggle-group 将所有按钮组合在一起。所以，他们将留在小组中。但是，如果您希望它们在左侧和右侧对齐，则应将它们从组中删除。尝试保留没有 mat-button-toggle-group 的按钮，然后保留按钮的样式
@Maruthi，是的，这就是我尝试过的，但是在从切换组切换到 mat 按钮时，这给了我另一个问题。

标签： css angular-material

【解决方案1】：

您需要调整一些 flexbox 样式以使其正常工作。当前实现使用display: inline-flex;，而它需要display: flex;。接下来，需要将第二个切换开关 (.mat-button-toggle:nth-child(2)) 推到右侧。这可以通过margin-left: auto 来实现。

SCSS 代码

.mat-button-toggle-group.mat-button-toggle-group {
  display: flex;

  .mat-button-toggle:nth-child(2) {
    margin-left: auto;
  }
}

编译的 CSS 代码

.mat-button-toggle-group.mat-button-toggle-group {
  display: flex;
}
.mat-button-toggle-group.mat-button-toggle-group .mat-button-toggle:nth-child(2) {
  margin-left: auto;
}

结果

有关示例，请参见 this StackBlitz。请注意，需要通过在 CSS 中再次添加相同的类并使其更具体来覆盖默认切换组。

【讨论】：

感谢您的及时回复。这适用于 Stackblitz，但是当我输入代码时，抛出错误，} expectedcss(css-rcurlyexpected)
@usersam 我用编译后的 CSS 代码编辑了答案。请将其添加到您的 CSS 文件中。
我删除了所有的 css，只放了你的 css，但它仍然没有根据需要对齐。