Css 如何在表单中添加标题？
我想在表单中添加标题，但找不到任何方法，下面是我的代码，最后我给出了有关如何显示标题的图像链接Css 如何在表单中添加标题？,css,angular-material,material-design,Css,Angular Material,Material Design,我想在表单中添加标题，但找不到任何方法，下面是我的代码，最后我给出了有关如何显示标题的图像链接 <div id="forms" class="page-layout simple fullwidth" fxLayout="column"> <div class="content p-24"> <div class="mb-24" fxLayout="column" fxLayoutAlign="start" fxLayout.gt-md="r
<div id="forms" class="page-layout simple fullwidth" fxLayout="column">
<div class="content p-24">
<div class="mb-24" fxLayout="column" fxLayoutAlign="start" fxLayout.gt-md="row">
<form class="mat-card mat-elevation-z4 p-24 mr-24" fxLayout="column" fxLayoutAlign="start" fxFlex="1 0 auto" name="form" [formGroup]="form">
<!-- <mat-card>New sales person</mat-card> -->
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
<mat-form-field appearance="outline" fxFlex="100" class="pr-4">
<mat-label>ID</mat-label>
<input matInput formControlName="company">
<mat-icon matSuffix>domain</mat-icon>
</mat-form-field>
<mat-form-field appearance="outline" fxFlex="50" class="pr-4">
<mat-label>Name</mat-label>
<input matInput formControlName="firstName" required>
<mat-icon matSuffix class="secondary-text">account_circle</mat-icon>
<mat-error> Name is required!</mat-error>
</mat-form-field>
<mat-form-field appearance="outline" fxFlex="50" class="pr-4">
<mat-label>Gender</mat-label>
<mat-select>
<mat-option>
Male
</mat-option>
<mat-option>
Female
</mat-option>
<mat-option>
Rather Not to say.
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
<mat-form-field appearance="outline" fxFlex="100" class="pr-4">
<input type='number' matInput name="" id="" placeholder="Phone">
<mat-icon matSuffix>phone</mat-icon>
</mat-form-field>
<mat-form-field appearance="outline" fxFlex="50" class="pr-4">
<input type='email' matInput name="" id="" placeholder="Email">
<mat-icon matSuffix>email</mat-icon>
</mat-form-field>
</div>
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
<mat-form-field appearance="outline" fxFlex="100" class="pr-4">
<input type='text' matInput name="" id="" placeholder="Team">
</mat-form-field>
<mat-form-field appearance="outline" fxFlex="50" class="pr-4">
<input type='text' matInput name="" id="" placeholder="Team Leader">
</mat-form-field>
</div>
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
<mat-form-field appearance="outline" fxFlex="100" class="pr-4">
<mat-label>County</mat-label>
<mat-select>
<mat-option>
Lorem.
</mat-option>
<mat-option>
Lorem.
</mat-option>
<mat-option>
Lorem.
</mat-option>
<mat-option>
Lorem.
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline" fxFlex="50" class="pr-4">
<mat-label>Sub County</mat-label>
<mat-select>
<mat-option>
Lorem.
</mat-option>
<mat-option>
Lorem.
</mat-option>
<mat-option>
Lorem.
</mat-option>
<mat-option>
Lorem.
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div fxLayout="row wrap" fxLayoutAlign="start center" fxFlex="1 0 auto">
<mat-form-field appearance="outline" fxFlex="100">
<mat-label>Physical Address</mat-label>
<textarea matInput formControlName="address" required>
</textarea>
<mat-error>Address is required!</mat-error>
</mat-form-field>
<mat-form-field appearance="outline" fxFlex="100">
<mat-label>Additional Information </mat-label>
<textarea matInput formControlName="address2"></textarea>
<mat-error>Additional is required!</mat-error>
</mat-form-field>
</div>
<!--
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
<mat-form-field appearance="outline" fxFlex="100">
<mat-label>Country</mat-label>
<mat-select formControlName="country" required>
<mat-option [value]="'United States of America'">
United States of America
</mat-option>
<mat-option [value]="'United Kingdom'">
United Kingdom
</mat-option>
<mat-option [value]="'Russia'">
Russia
</mat-option>
<mat-option [value]="'China'">
China
</mat-option>
<mat-option [value]="'Japan'">
Japan
</mat-option>
<mat-option [value]="'Turkey'">
Turkey
</mat-option>
</mat-select>
<mat-icon matSuffix class="secondary-text">outlined_flag</mat-icon>
<mat-error>Country is required!</mat-error>
</mat-form-field>
</div> -->
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
<mat-form-field appearance="outline" fxFlex="50" class="pr-4">
<mat-label>Input 1</mat-label>
<input matInput formControlName="Input1" required>
<mat-icon matSuffix class="secondary-text">account_circle</mat-icon>
<mat-error> Input 1 is required!</mat-error>
</mat-form-field>
<mat-form-field appearance="outline" fxFlex="50" class="pr-4">
<mat-label>Input 2</mat-label>
<input matInput formControlName="Input2" required>
<mat-icon matSuffix class="secondary-text">account_circle</mat-icon>
<mat-error> Input 1 is required!</mat-error>
</mat-form-field>
</div>
<button mat-raised-button class='submitButton' style="background-color: #27803f; color: white;">Submit
form</button>
</form>
</div>
</div>
</div>
我试着把卡片放进去，但没用。我假设你只想添加一个带有CSS的标题。 您可以使用以下CSS实现这一点：
#forms:before {
content: 'This is your heading';
background: #00398e;
width: 100%;
display: block;
padding: 10px 20px;
color: white;
font-family: Arial;
font-size: 26px;
}
form.mat-card.mat-elevation-z4:before {
content: 'This is your heading';
background: #00398e;
width: 100%;
display: block;
padding: 10px 20px;
color: white;
font-family: Arial;
font-size: 26px;
}
<md-card-header>
<md-card-title>Your title goes here</mat-card-title>
</md-card-header>
在这里，我为您的愿望编辑了mat卡：您可以在任何课程之前附加：。看看我给你的新样品。如果它仍然在您的框外，则将其附加到框内的元素/类。这不是一个特别容易访问的解决方案。这没有按照我希望的方式工作：
<md-card-header>
<md-card-title>Your title goes here</mat-card-title>
</md-card-header>