时间戳

首页 > 解决方案 > 如何在另一个 mat-card 中包含 mat-card。输出不对齐

css - 如何在另一个 mat-card 中包含 mat-card。输出不对齐

问题描述

我希望能够将测试卡包含在 mat-grid-tile 中。测试卡应该包含一个圆环图，它将是 mat-tab 将显示的任何计算的结果。我的问题是图表（测试卡）没有对齐。我是 UI 开发的新手，所以请多多包涵。

html示例

<mat-card class="sample-title">Test</mat-card>
    <mat-grid-list cols="4" rowHeight="280px">
      <mat-grid-tile colspan="3">
        <mat-card class = "card-class">
        <mat-tab-group>
          <mat-tab label="First">
            <mat-card>Content 1 </mat-card>
          </mat-tab>
          <mat-tab label="Second">
            <mat-card>Content 2</mat-card>
          </mat-tab>
          <mat-tab label="Third">
            <mat-card>Content 3</mat-card>
          </mat-tab>
          </mat-tab-group>
        </mat-card>
        <mat-card class="test-card">Test</mat-card>
      </mat-grid-tile>
    </mat-grid-list>

CSS 示例

.sample-title {
  background-color: #ffffff;
  font-family: "GT-Walsheim-Pro-Bold";
  font-size: 16px;
  color: black;
  border-top: 3px solid #175fab;
  border-radius: 0px;
  width: 700px;
  height: 15px;
  margin-left: 30px;
  margin-top: 30px;
  right: 0;
}

.card-class {
  background-color: #ffffff;
  font-family: "GT-Walsheim-Pro-Bold";
  font-size: 16px;
  color: black;
  border-radius: 0px;
  width: 1500px;
  /* max-height: 400px; */
  margin-left: 30px;
  margin-top: -120px;
  overflow: auto;
  right: 0;
}

标签： cssangularjssassangular-material

解决方案

推荐阅读