降低垫子按钮的高度以匹配按钮

Question

我有一个Angular Flex-Layout行，其中包含一些按钮和一个mat-button-toggle-group。不幸的是，mat-button-toggle-group比按钮要大一些，我希望它们的高度/行高都相同。

目前看起来很热：

试图与mat-button-toggle-group和其他css类一起使用，但是只能在内容保持不变的情况下减小按钮高度。

  <div fxLayout="row wrap" fxLayoutAlign="space-between end">
    <div>
        <div fxLayout="row wrap" fxLayoutAlign="space-between end">
          <div class="control-buttons">
            <button
              mat-stroked-button
            >
              <i class="material-icons">skip_previous</i>
            </button>    
            ( more buttons )
        </div>
    </div>
    <div>
        <div fxLayout="row wrap" fxLayoutAlign="space-between end">
            <mat-button-toggle-group multiple>
                  <mat-button-toggle
                    value="random"
                  >
                    <i class="material-icons">
                      shuffle
                    </i>
                    <span class="only-on-big-screen">
                      random
                    </span>                
                  </mat-button-toggle>    
                  ( more buttons )
              </mat-button-toggle-group>
          </div>
    </div>
  </div>

Answer 1

另一种解决方法是这样做：

.mat-button-toggle-group {
  height: 32px;
  align-items: center;
}

Answer 2

您可以通过添加自定义样式来更改高度。您必须更改类line-height的{​​{1}}。

mat-button-toggle-label-content