html - 为什么复选框字段后的这个字段总是浮动在右边？

Question

在一个 Angular 应用程序中，我循环遍历表单字段列表，以根据它们的性质在网格中显示它们。例如，如果字段需要在网格中为全宽，则其宽度为 98%，如果为网格中宽度的一半，则其宽度为 47%。现在一切正常，如下图所示，但不是任何复选框后的字段。

在这里您可以看到那些需要半宽的人可以完美地工作，但是 Credit Cales 复选框字段后的利率字段始终浮动在右侧，即使应用了与其他字段相同的样式。

这是用于半角元素的 .example-width-2 类的样式。

.example-width-2 {
    width: 47%;
    float: left;
    padding-right: 1.5%;
    margin-bottom: 0px;
    display: flex;
    flex-direction: column;
}

这是用于在循环中生成所有字段的 html 标记。

 <div *ngFor="let input1 of formdata.properties">   
     <div>
          <mat-form-field class="example-width-{{input1.colmptypeid}}">
          <input matInput   type="text"  placeholder="{{input1.title}}">
    </div>
</div>

这里 {{input1.colmptypeid}} 是 1 或 2 表示全角或半角。我真的不知道为什么它只发生在复选框之后的字段中。

标签： htmlcssangularangular-flex-layout