角材料垫网格表最外边框

Question

我有一个mat网格列表，它具有用户定义行数和列数。我需要显示每个mat-grid-title单元格的所有边框。

但是，如何正确显示mat-grid-list的最外面的黑色边框呢？

<mat-grid-list cols="2" rowHeight="200px" style="border: 4px solid black">
  <mat-grid-tile style="border: 2px solid red">
    <div class='internalMatGrid' >
      <mat-grid-list cols="1" rowHeight="2:1">
        <mat-grid-tile>1</mat-grid-tile>
      </mat-grid-list>
    </div>
  </mat-grid-tile>
  <mat-grid-tile style="border: 2px solid red">2</mat-grid-tile>
  <mat-grid-tile style="border: 2px solid red">3</mat-grid-tile>
  <mat-grid-tile style="border: 2px solid red">4</mat-grid-tile>
</mat-grid-list>

这是我的stackblitz https://stackblitz.com/edit/Angular-7GJJJN

谢谢你

Answer 1

只需在mat-grid-title元素中添加box-sizing：border-box；CSS属性，就可以解决您的问题。谢谢

<mat-grid-list cols="2" rowHeight="200px" style="border: 4px solid black">
  <mat-grid-tile style="border: 2px solid red; box-sizing: border-box;">
    <div class='internalMatGrid' >
      <mat-grid-list cols="1" rowHeight="2:1">
        <mat-grid-tile>1</mat-grid-tile>
      </mat-grid-list>
    </div>
  </mat-grid-tile>
  <mat-grid-tile style="border: 2px solid red; box-sizing: border-box;">2</mat-grid-tile>
  <mat-grid-tile style="border: 2px solid red; box-sizing: border-box;">3</mat-grid-tile>
  <mat-grid-tile style="border: 2px solid red; box-sizing: border-box;">4</mat-grid-tile>
</mat-grid-list>