Html Angular mat-form-field 如何设置宽度：100%

Angular mat-form-field how to set width:100%

提问by user428745

I create a registration form as part of my learning Angular and Nodejs. My form looks wide and it is ok, however the fields on this form looks narrow or thin. I tried to set Width:100% direct to the container tag but didn't work.

我创建了一个注册表作为我学习 Angular 和 Nodejs 的一部分。我的表格看起来很宽，没关系，但是这个表格上的字段看起来很窄或很薄。我试图将 Width:100% 直接设置为容器标签，但没有奏效。

How to set width:100% for all these fields using a css tag?

如何使用 css 标签为所有这些字段设置宽度：100%？

My form using angular:

我使用 angular 的表单：

<mat-card>
  <mat-card-header>
    <mat-card-title>
      <h4>Register New User</h4>
    </mat-card-title>
  </mat-card-header>
  <mat-card-content class="register-container">
    <form>
      <mat-form-field>
        <input matInput placeholder="E-mail" ng-model="data.email" type="email">
      </mat-form-field>
      <br />
      <mat-form-field>
        <input matInput placeholder="Password" ng-model="data.pwd" type="password">
      </mat-form-field>
      <br>
      <mat-form-field>
        <input matInput placeholder="Name" ng-model="data.name" type="text">
      </mat-form-field>
      <br>
      <mat-form-field>
        <textarea matInput ng-model="data.description" placeholder="Leave a comment"></textarea>
      </mat-form-field>
    </form>
  </mat-card-content>
</mat-card>

回答by Tomasz Kula

This works just fine.

这工作得很好。

mat-form-field {
  width: 100%;
}

Live demo

现场演示

回答by Rahul.S

This worked for me

这对我有用

mat-form-field{
  display: block;
}