角度材料卡布局

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; }