Question

我使用Angular6，Material和Flexbox构建系统。我开始构建表单的布局，结果如下图所示

添加简单的<form>标记会彻底破坏布局：

问题：为什么表单会破坏布局，如何解决此问题？

代码（它有点长，也许只需要ctrl + f来查找标签并分析标签为什么会破坏布局）

<div fxLayout="row" fxLayoutGap="20px" style="min-height: 500px;">

    <mat-card fxFlex="50" fxLayout="row">
      <form> <!-- THIS FORMS DESTROYS LAYOUT -->
        <div fxFlex="45" fxLayout="column">
            <mat-form-field>
                <input type="text" matInput placeholder="Navn på læge"/>
                <mat-error>Errors appear instantly!</mat-error>
            </mat-form-field>

            <mat-form-field>
              <mat-select placeholder="Distrikt">
                <mat-option  [value]="1">
                  Distrikt 1
                </mat-option>
                <mat-option  [value]="2">
                  Distrikt 2
                </mat-option>
                <mat-option  [value]="2">
                  Distrikt 3
                </mat-option>
                <mat-option  [value]="2">
                  Distrikt 4
                </mat-option>
                <mat-option  [value]="2">
                  Distrikt 5
                </mat-option>
                <mat-option  [value]="2">
                  Distrikt 6
                </mat-option>
              </mat-select>
            </mat-form-field>

            <mat-form-field>
              <mat-select placeholder="Projekt Sygeplejerske">
                <mat-option  [value]="1">
                  SP 1
                </mat-option>
                <mat-option  [value]="2">
                  SP 2
                </mat-option>
                <mat-option  [value]="2">
                  SP 3
                </mat-option>
                <mat-option  [value]="2">
                  SP 4
                </mat-option>
              </mat-select>
            </mat-form-field>

            <mat-form-field>
              <mat-select placeholder="Account Manager">
                <mat-option  [value]="1">
                  AM 1
                </mat-option>
                <mat-option  [value]="2">
                  AM 2
                </mat-option>
              </mat-select>
            </mat-form-field>

            <div fxLayout="row">
                <mat-form-field fxFlex="45">
                  <input matInput [matDatepicker]="picker" placeholder="Møde 1 Dato" disabled>
                  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                  <mat-datepicker #picker disabled="false"></mat-datepicker>
                </mat-form-field>
                <div fxFlex></div>
                <mat-form-field fxFlex="45">
                    <input type="text" matInput placeholder="Møde 1 klokkeslet"/>
                </mat-form-field>
            </div>

            <div fxLayout="row">
                <mat-form-field fxFlex="45">
                  <input matInput [matDatepicker]="picker2" placeholder="Møde 2 Dato" disabled>
                  <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
                  <mat-datepicker #picker2 disabled="false"></mat-datepicker>
                </mat-form-field>
                <div fxFlex></div>
                <mat-form-field fxFlex="45">
                    <input type="text" matInput placeholder="Møde 2 klokkeslet"/>
                </mat-form-field>
            </div>

            <mat-form-field>
              <mat-select placeholder="EPJ System">
                <mat-option  [value]="1">
                  XMO
                </mat-option>
                <mat-option  [value]="2">
                  Clinea
                </mat-option>
                <mat-option  [value]="2">
                  NOVAX
                </mat-option>
                <mat-option  [value]="2">
                  WinPLC
                </mat-option>
                <mat-option  [value]="2">
                  Ganglion
                </mat-option>
                <mat-option  [value]="2">
                  Medwin
                </mat-option>
              </mat-select>
            </mat-form-field>

        </div>
        <div fxFlex></div>
        <div fxFlex="45" fxLayout="column">
            <mat-form-field>
                <input type="text" id="autocompleteInput" matInput autocofus placeholder="Søg adresse"/>
            </mat-form-field>

            <mat-form-field>
                <input type="text" matInput disabled placeholder="Land"/>
            </mat-form-field>

            <mat-form-field>
                <input type="text" matInput disabled placeholder="Vej"/>
            </mat-form-field>

            <div fxLayout="row">
                <mat-form-field fxFlex="45">
                    <input type="text" matInput disabled placeholder="Husnummer"/>
                </mat-form-field>
                <div fxFlex></div>
                <mat-form-field fxFlex="45">
                    <input type="text" matInput placeholder="Etage"/>
                </mat-form-field>    
            </div>
            <div fxLayout="row">
                <mat-form-field fxFlex="25">
                    <input type="text" matInput disabled placeholder="Postnummer"/>
                </mat-form-field>
                <div fxFlex></div>
                <mat-form-field fxFlex="65">
                    <input type="text" matInput disabled placeholder="By"/>
                </mat-form-field>    
            </div>
            <div fxFlex></div>
            <div fxLayoutAlign="center center">
                <button fxFlex="35" mat-raised-button color="primary" routerLink="/administrator/create_doctor">Opret læge</button>
            </div>
          </div>
      </form> <!-- FORMS END TAG -->
    </mat-card>

    <mat-card fxFlex="50">
    <!-- LEFT OUT FOR SIMPLICITY --> 
    </mat-card>
</div>

Answer 1

此代码使输入形成彼此相邻的列：<mat-card fxFlex="50" fxLayout="row"> 所以当你在里面添加<form>时，你必须给它相同的css。

尝试将<form>改为<form fxFlex="50" fxLayout="row">。

此外，您可以从fxFlex="50" fxLayout="row"

中删除mat-card

添加<form>会破坏布局

1 个答案: