css - 垂直分离 Angular Material 卡片
问题描述
我想用卡片垂直列出数组中的项目,但它们之间没有空格。我尝试使用填充,但它似乎不起作用。
我怎样才能让这些卡片间隔?
<ng-container *ngIf="titles?.length; else noTitle">
<mat-card class="asd cardPardding" *ngFor="let title of titles">
<p>
{{title}}
</p>
</mat-card>
</ng-container>
<ng-template #noTitle>
<mat-card class="asd cardPardding">
<p>
No title !
</p>
</mat-card>
</ng-template>
这是CSS
.asd {
width: 80%;
margin: 0 auto; /* Added */
}
.inputasd {
width: 100%;
}
.cardPadding {
padding: 100px;
margin-bottom: 50px;
}
解决方案
.component.html
<ng-container *ngIf="titles?.length; else noTitle">
<mat-card class="my-class-name asd cardPardding" *ngFor="let title of titles">
<p>
{{title}}
</p>
</mat-card>
</ng-container>
<ng-template #noTitle>
<mat-card class="asd cardPardding">
<p>
No title !
</p>
</mat-card>
</ng-template>
.css/.scss 文件
.my-class-name{
margin-bottom: 10px;
...
}
推荐阅读
- python - 熊猫用另一列中的值替换列中的值
- c++ - 如何使用 itk 上的新功能更改这些旧功能
- reactjs - React & Typescript:省略带有扩展语法的道具会导致打字稿错误。高级类型
- arrays - LeetCode TwoSum question returning buggy answer (C Implementation)
- wordpress - Wordpress 在另一个函数中从 wp_signon 获取登录错误
- spring-cloud-contract - 在spring cloud contrat maven插件上指定版本
- javascript - 用 HTML 表单中的数据填充 Excel 电子表格单元格
- python - 为什么我的 import scapy.all 根本不起作用?
- javascript - 在状态发生突变之前调用 SetState 回调
- perl - Intellij Perl5 添加 Perl5 解释器