Html 角垫窗体字段如何设置宽度：100%

我创建了一个注册表格，作为我学习Angular和NodeJ的一部分。 我的表单看起来很宽，也可以，但是此表单上的字段看起来很窄或很薄。我试图设置宽度：100%直接指向容器标签，但没有成功

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

我的表格使用角度：

注册新用户

这很好用

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

这对我很有效

mat-form-field{
  display: block;
}

---

你也可以这样做

  <mat-form-field [style.width.%]="100"></mat-form-field>

这也有助于根据组件的属性有条件地设置样式值

 <mat-form-field [style.width.%]="fullWidth? '100' : '50'"></mat-form-field>

---

当

mat表单字段

选择器有效且工作正常时，SonarQube和其他代码质量工具将在自定义选择器上发出警告

我的建议是通过类名而不是组件标记来钩住表单字段

---

.mat表单字段{width:100%；}

如果使用flexLayout，只需使用fxFlex设置所需大小即可，如下代码：

 <mat-form-field appearance="outline" fxFlex="40"></mat-form-field>

---

我以前也有同样的问题，这是我解决问题的方法

为要编辑的字段的容器使用标识符。例如，我将使用单词sopi

---

这样，规则将只适用于标识为sopi的容器，输入将设置为100%。

我猜这会影响所有对话框中的所有表单字段-请耐心等待noob问题-在一个对话框中为这些具体化的对话框表单字段设置不同宽度的正确方法是什么？只需在component file.didn不适用于Mesometime最好的方法很简单：）thx

    <mat-card id="sopi">
      <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 />
        </form>
      </mat-card-content>
    </mat-card>