Question

我有此代码：

<script>
  var table = document.createElement("table");
  var rows = 10;
  var cols = 10;

  for(var r = 0; r < rows; r++){
    var row_create = document.createElement("tr");

    for(var c = 0; c < cols; c++){
      var col_create = document.createElement("td");
      row_create.appendChild(col_create);
    }

    table.appendChild(row_create);
  }

  document.body.appendChild(table);
</script>

如何使<mat-card> <mat-card-header> <mat-card-subtitle> <h2>Explorador de Eventos</h2> </mat-card-subtitle> </mat-card-header> <mat-card-content> <div> <mat-form-field> <input matInput [matDatepicker]="picker1" [(ngModel)]="filter.startDate" placeholder="Fecha inicio"> <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle> <mat-datepicker #picker1></mat-datepicker> </mat-form-field> <mat-form-field> <input type="time" [(ngModel)]="filter.startTime" matInput placeholder="Hora inicio"> </mat-form-field> <button (click)="search()" mat-raised-button class="m-1">Monitorear</button> </div> </mat-card-content> </mat-card>漂浮或对齐到button的内部？

目前正以这种方式显示：

我想要这样：

Answer 1

取决于您对小容器，在拉伸等过程中的行为要求，可以用多种方法实现。这是使用flex的简单解决方案。

首先，在mat-card-content中添加另一个包装器。它应包含具有字段和按钮的div。

<mat-card>
    <mat-card-header>
        <mat-card-subtitle>
            <h2>Explorador de Eventos</h2>
        </mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>
        <div class="wrapper">
            <div class="fields-wrapper">
                <mat-form-field>
                    <input matInput [matDatepicker]="picker1" [(ngModel)]="filter.startDate" placeholder="Fecha inicio">
                    <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
                    <mat-datepicker #picker1></mat-datepicker>
                </mat-form-field>

                <mat-form-field>
                    <input type="time" [(ngModel)]="filter.startTime" matInput placeholder="Hora inicio">
                </mat-form-field>
            </div>
            <button (click)="search()" mat-raised-button class="m-1">Monitorear</button>
        </div>
    </mat-card-content>
</mat-card>

然后，制作父级flex容器，将项目与基线对齐（以便它们在水平方向正确对齐），将内容对齐为space-between（使项目分别与最左边和最右边的边框对齐）

.wrapper {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
}

.fields-wrapper {
  display: inline-flex;
  flex-wrap: wrap;
}

还添加了flex-wrap，以便为较小的显示器包装。

Stackblitz example

角度材质，“ Flex对齐”右键

1 个答案: