![text的div]( "text的div")
本文介绍了你如何处理material2卡中带有mat-card-header-text的div?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我似乎无法将这个容器放在 md 卡中.
在我的材料卡中，我有这个:
我见过其他人注意到它.它会在我的标题左侧产生一个 40px 的空间.似乎也没有 CSS 影响它.
我使用的是 Angular 4.x 和 Material2.
解决方案
使用以下 css 和 html 修复它:
md-card-title >跨度 {背景色:#fff;背景颜色:rgba(255, 255, 255, 0.5);位置:绝对；边距顶部:-81px；左边距:-24px；字体大小:20px；填充:10px；}<div class="main" mat-padding fxLayout="row" fxLayoutWrap="no-wrap" fxLayoutAlign="center start" fxLayoutGap="15px"><md-card class="mat-elevation-z2" mat-whiteframe="8" (click)="goToArticle(article)" *ngFor="let article of articleStore.articles() | async"><img md-card-image src="{{ article.getCover() }}"><md-card-title fxFlex><span>{{ article.title }}</span></md-card-title><md-card-content><p>{{ article.description }}</p></md-card-content></md-card>
使用
I can't seem to wrap my head around having this container in an md card.
In my material cards, I have this:
<div class="mat-card-header-text"> </div>
I've seen other people notice it. It causes a 40px space on the left of my title. No CSS seems to affect it either.
I am using Angular 4.x and Material2.
解决方案
Fixed it using the following css and html:
md-card-title > span {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.5);
position: absolute;
margin-top: -81px;
margin-left: -24px;
font-size: 20px;
padding: 10px;
}
<div class="main" mat-padding fxLayout="row" fxLayoutWrap="no-wrap" fxLayoutAlign="center start" fxLayoutGap="15px">
<md-card class="mat-elevation-z2" mat-whiteframe="8" (click)="goToArticle(article)" *ngFor="let article of articleStore.articles() | async">
<img md-card-image src="{{ article.getCover() }}">
<md-card-title fxFlex>
<span>{{ article.title }}</span>
</md-card-title>
<md-card-content>
<p>{{ article.description }}</p>
</md-card-content>
</md-card>
</div>
Using <md-card-header></md-card-header>gives some odd spacing issues. Not sure if this is a bug or not.
这篇关于你如何处理material2卡中带有mat-card-header-text的div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！