[英]Angular Material mat-card-content and mat-card-actions: how to change spacing between these two?
我正在设计一张垫卡,其中垫卡内容中有两张垫卡。 现在,当为 mat-card-actions 添加按钮时,这两者之间没有任何间距。 如何在这两个组件 [mat-card-content (of parent) 和 mat-card-actions (of parent)] 之间创建一个空间(垂直)?
app.component.scss
.Details {
padding-top: 50px;
padding-bottom: 50px;
padding: 100px 250px;
text-align: center;
margin-left: 10%;
margin-right: 10%;
width: 80%;
height: 50%;
}
.seatsAvailable {
float: left;
width: 45%;
// margin-right: -50px;
}
.ticketPrice {
float: right;
width: 45%;
// margin-right: -50px;
}
app.component.html
<div class="Details">
<mat-card>
<button mat-icon-button><mat-icon>arrow_back</mat-icon>Back</button>
<mat-card-header>
<mat-card-title>Name</mat-card-title>
<mat-card-subtitle>Status value</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<mat-card class="seatsAvailable">
<mat-card-header style="text-align:center; margin-left: 60px;">
<mat-card-title>Seats</mat-card-title>
</mat-card-header>
<mat-card-content>
<strong>Seats value</strong>
</mat-card-content>
</mat-card>
<mat-card class="ticketPrice">
<mat-card-header style="text-align:center; margin-left: 60px;">
<mat-card-title>Ticket Price:</mat-card-title>
</mat-card-header>
<mat-card-content>
<strong>Ticket Price value</strong>
</mat-card-content>
</mat-card>
</mat-card-content>
<br>
<mat-card-actions style="margin-top:50px; margin-bottom: 50px;">
<button mat-button style="border: 1px solid rgb(77, 40, 146);">Result msg</button>
</mat-card-actions>
</mat-card>
</div>
试试这段代码,如果这不起作用,请创建一个 stackblitz 运行代码示例 -
<mat-card-actions style="width: 100%;display: inline-block;">
<button mat-button style="border: 1px solid rgb(77, 40, 146);">Result msg</button>
</mat-card-actions>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.