角度材料卡布局

Question

我正在使用 Angular Mat 卡，并且有一个按钮，每次单击该按钮时都会在数据库中创建新卡，但新卡显示在现有卡的底部，两者之间没有任何间隙，所以如果你们可以提供帮助我弄清楚如何制作间隙/边距，这会很棒。谢谢这就是现在的样子这就是我想要的样子 .clickable {     cursor: pointer; } .mat-chip {     background-color: #DFDFDF;     text-align: left;     font: Regular 16px/21px Roboto;     letter-spacing: 0.29px;     color: #000000DE;     opacity: 1;     border-radius: 18px;     opacity: 1; } .mat-card {     margin-left: -10px;     padding: 0;     margin-bottom: 20px;;     width: 350px;     height: auto;     cursor: pointer;           } .chipMargin{     margin-left: 5%;     margin-right: 5%; } .mat-chip-list {   display: table-row;   flex-direction: column; }@media screen and (min-width:768px){.divider {   height: 90%;    position: absolute;     left: 900px;    right: 830px;    top: 40px;  }.column {    float: left;    width: 950px;    padding: 10px;    margin-left: 30px;    margin-top: 10px;    }.column2 {    width: 730px;    float: right;    right: 70px;    position: absolute;  }.row:after {    content: "";    display: table;    clear: both;  }  .inline-block {    display: inline-block;  }}

Answer 1

你只需要将 margin-bottom CSS 属性添加到你的卡片中，如下所示：

.mat-card:not(:last-child) {
  margin-bottom: 20px;
}

编辑：

我仔细查看了您的代码，发现您没有创建卡片，而是在卡片内创建列表项。您的ngFor指令被放置在a标签上。将ngFor指令放在卡片上，或者如果您想创建列表项，请添加以下代码：

.mat-list-item:not(:last-child) {
  margin-bottom: 20px;
}