Question

我有一个垫网格列表，其中包含用户定义的行数和列数。我需要显示每个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>

这是我的闪电战 https://stackblitz.com/edit/angular-7gjjjn

谢谢

Answer 1

它是一种可修复的工具，我不知道它是否正确，但我知道了您的需要，

我将grid-list包裹在一些div中，并给div一个border并带有一些padding骇客。

HTML

<div class="wrap">
<mat-grid-list cols="2" rowHeight="200px">
  <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>
</div>

CSS

.wrap {
    border: 4px solid;
    padding: 0px 4px 4px 0;
}

Answer 2

只需在 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>

角材质垫网格列表的最外边界

2 个答案: