html - 如何在角度 4 中对齐左右文本 mat-card-header?
问题描述
我需要对齐标题标签左右两侧标题中的文本内容。我尝试了不同的想法,但没有一个适合我。帮我。
<div style="width: 40%">
<mat-card>
<mat-card-header class="card-container">
<mat-card-title class="card-container-right"> Test right</mat-card-title>
<mat-card-title class="card-container-left"> Test left</mat-card-title>
</mat-card-header>
<mat-card-content>
</mat-card-content>
</mat-card>
</div>
解决方案
如果您想继续使用这些mat-title
元素,也可以这样做:
在您的(我称之为)example-card.component.html 文件中
<mat-card >
<mat-card-header>
<mat-card-title class="card-container-left"> Test left</mat-card-title>
<mat-card-title class="card-container-right"> Test right</mat-card- title>
</mat-card-header>
<mat-card-content>
</mat-card-content>
然后在你的example-card.component.css
.card-container-right{
display: inline;
float: right;
}
.card-container-left{
display: inline;
}
..最后在你的styles.css中
.mat-card-header-text{
width: 100% !important;
}
解决这个问题的技巧是覆盖 Angular 材质.mat-card-header-text
使其 100% 的宽度为mat-card-header
. 否则,它的行为类似于内联元素,并且只占用其子元素文本的宽度。防止你把它们隔开。
推荐阅读
- html - 如何为移动设备替换标题背景图像 - 引导程序
- java - 强制类为 Tomcat 会话复制实现 Serializable
- java - 不允许运行 keytool 时是否可以添加 SSL 证书?
- excel - VBA:从 XFA 表单中提取 XML 数据并传递给 XML 解析器
- php - 如何在网站上显示存储在 MySQL 数据库表中的网站链接,但显示为要点击的超链接?
- python - Python webscraping如何只获取body html
- php - 如果字符串中已经存在逗号,则数组内爆到 MySql,然后检索值并爆炸回相同的数组不起作用
- python - 解析文件时的进度条
- python - 使用 pandas 数据框生成 GEOJSON
- outlook - Microsoft Outlook 365 支持哪些颜色名称?