Html 使用百分比定义卡片标题宽度
我将中心垫卡片标题文本。所以我需要把它的宽度设置为100%,但我没有得到结果,只有当我使用“px”时 所以我试着给所有的父容器设置一个宽度,但没有结果 这是我的html文件Html 使用百分比定义卡片标题宽度,html,css,angular,angular-material2,md-card,Html,Css,Angular,Angular Material2,Md Card,我将中心垫卡片标题文本。所以我需要把它的宽度设置为100%,但我没有得到结果,只有当我使用“px”时 所以我试着给所有的父容器设置一个宽度,但没有结果 这是我的html文件 <div Fxlaout="row" fxLayoutGap="20px" class="container"> <div fxFlex=30> <mat-card> <mat-card-header>
<div Fxlaout="row" fxLayoutGap="20px" class="container">
<div fxFlex=30>
<mat-card>
<mat-card-header>
<mat-card-title>Collaborateurs sur ce projet</mat-card-title>
</mat-card-header>
<mat-card-content>
<mat-list role="list" *ngFor="let per of Projet?.pers">
<mat-list-item role="listitem">Nom : {{per.name}}</mat-list-item>
<mat-list-item role="listitem">poste : {{per.poste}}</mat-list-item>
</mat-list>
</mat-card-content>
</mat-card>
</div>
<div fxFlex>
<mat-card>
<mat-card-header>
<mat-card-title>Les fonctionnalités du produit</mat-card-title>
</mat-card-header>
<mat-card-content>
<mat-list role="list" *ngFor="let func of Projet?.backlog.fonctionnalite; let i=index">
<mat-list-item role="listitem">Fonctionnalité #{{i}} : {{func.fonctionnalite}}</mat-list-item>
</mat-list>
</mat-card-content>
</mat-card>
</div>
</div>
我还在我的app.component.ts中添加了宽度百分比,我将其称为我的组件:
<app-navabar></app-navabar>
<div style="width:100%">
<router-outlet></router-outlet>
</div>
然后我将styles.css文件添加到正文中
我看不出宽度不为x%的元素在哪里。角材质将您的
包裹在一个
内,带有类垫卡头文本。克服此问题的一种方法是通过向css中添加以下内容来覆盖该类:
/deep/ .mat-card-header-text {
width: 100%;
text-align: center;
}
提示-下次遇到类似问题时,使用Google Chrome开发者工具调试编译的HTML。
有棱角的材质将您的
包裹在一个
内,并带有一个类垫卡头文本。克服此问题的一种方法是通过向css中添加以下内容来覆盖该类:
/deep/ .mat-card-header-text {
width: 100%;
text-align: center;
}
提示-下次遇到类似问题时,使用Google Chrome开发者工具调试编译的HTML。
被接受的答案对我不起作用。我必须补充:
.mat-card-header-text {
width: 100%;
}
.mat-card-header {
justify-content: center;
}
被接受的答案对我不起作用。我必须补充:
.mat-card-header-text {
width: 100%;
}
.mat-card-header {
justify-content: center;
}
谢谢,这很有效。我总是使用Chrome开发工具,但我没有注意到这一点。谢谢,这是有效的。我总是使用Chrome开发工具,但我没有注意到这一点