时间戳

首页 > 解决方案 > mat-grid-list 正确对齐第二行的问题

angular-material - mat-grid-list 正确对齐第二行的问题

问题描述

我在第一个 mat-grid-list 名称和功能中有两个字段，在第二行中我有搜索和清除按钮，我在这里的问题是我想将所有按钮浮动到网格的右侧，但我也无法相应地做到这一点当我给float:right;线不显示时。我希望正确对齐，我该如何实现？

<mat-grid-list cols = "7" >
      <mat-grid-tile 
      [colspan] = "1"
      [rowspan] = "1">
      <div class="form-group user">
          <label for="name">Name</label>
          <input matInput class="form-control input" [(ngModel)]="userName"matAutocomplete]="auto">
          <mat-autocomplete class="user-autocomplete" #auto="matAutocomplete">
            <mat-option *ngFor="let user of filteredUsers" [value]="user.name">
                <span class="username">{{user.name}}</span>
                <span class="usercode">{{user.code}}</span>
              </mat-option>
          </mat-autocomplete>
      </div>
      </mat-grid-tile>
      <mat-grid-tile 
      [colspan] = "1"
      [rowspan] = "1">     
       <div class="form-group function">
          <label for="function">FUNCTION</label>
          <div class="input-group">
            <mat-form-field floatLabel="never">
              <mat-select  placeholder="Select Function">
                  <mat-option *ngFor="let option of functionOptions" [value]="option.name">    
                  {{option.name}}
                </mat-option>
              </mat-select>

              <img class="material-icons chevron-down-torq select-chevron" src="assets/icons/dropdown-chevron.svg" />
            </mat-form-field>
          </div>
        </div>
      </mat-grid-tile>
  </mat-grid-list>

  <mat-grid-list cols = "7" style="float:right" >
      <mat-grid-tile 
      [colspan] = "1"
      [rowspan] = "1">
      <div class="buttons">
          <button mat-button name="search" class="search" [ngClass]="{'disable-search-btn' : !isSearch}">search</button>
      </div>
      </mat-grid-tile>
      <mat-grid-tile 
      [colspan] = "1"
      [rowspan] = "1">     
       <div class="buttons">
          <button mat-button name="clear" class="clear" [ngClass]="{'disable-clear-btn' : !isSearch}">clear</button>

        </div>
      </mat-grid-tile>
  </mat-grid-list>

CSS：

.buttons { 网格间隙：20px;

.search {
  border: none;
  padding: 5px 15px;
  background-color: blue;
  color: white;
  text-transform: capitalize;
  font-weight: normal;
  cursor: pointer;

  &:hover {
    background-color: grey;
  }

  &:focus {
    background-color: dark grey;
    outline: 0;
  }
}

.clear {
  border: 1px solid lightblue;
  padding: 5px 15px;
  text-transform: capitalize;
  font-family: $roboto-font;
  font-weight: normal;
  font-size: $font-size;

  &:hover {
    background-color: red;
  }

  &:focus {
    background-color: green;
    outline: 0;
  }
}

标签： angular-materialangular8

解决方案

您需要添加style="float:right"按钮。

<mat-grid-list cols = "7">
      <mat-grid-tile 
       [colspan] = "5"
       [rowspan] = "1">
      </mat-grid-tile>
      <mat-grid-tile 
      [colspan] = "1"
      [rowspan] = "1">
      <div class="buttons">
          <button mat-button name="search" class="search" [ngClass]="{'disable-search-btn' : !isSearch}" style="float:right">search</button>
      </div>
      </mat-grid-tile>
      <mat-grid-tile 
      [colspan] = "1"
      [rowspan] = "1">     
       <div class="buttons">
          <button mat-button name="clear" class="clear" [ngClass]="{'disable-clear-btn' : !isSearch}" style="float:right">clear</button>

        </div>
      </mat-grid-tile>
 </mat-grid-list>

推荐阅读