时间戳

首页 > 解决方案 > 如何以角度更改按钮位置？

html - 如何以角度更改按钮位置？

问题描述

我想更改我的 html 代码中的按钮位置，但我在 j 中遇到了问题，如下图所示！我想把按钮放在模态的页脚！

在此处输入图像描述

在此处输入图像描述

输出（底部的按钮）： 在此处输入图像描述

这是我的代码：

<div class="modal-header" >
  <h6 class="modal-title" id="modal-basic-title">Notes</h6>
  <button type="button" class="close" aria-label="Close" (click)="closemodal()">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body" style="width:500px ; height:600px; overflow-y: auto" >
  <mat-accordion >
    <mat-expansion-panel *ngFor="let i of listCategorie" class="parentPanel"     >
      <mat-expansion-panel-header class="parentPanel_header" (click)="getSouCategories(i.id)" >
        <mat-panel-title > {{i.libelle}} {{i.id}}
          <span class="badge badge-light " style="position:absolute; right:6em"> {{listCategorie.length}} </span>

        </mat-panel-title>

      </mat-expansion-panel-header>

      <mat-accordion multi>
        <mat-expansion-panel style="background-color: #EEDFF5;"  class="childPanel childPanelCount" [expanded]="true" hideToggle disabled>
          <div class="d-flex mt-2">
            <div class="p-2"><p> Nombre des sous catégories </p></div>
          <div class="ml-auto p-2">
          <span class="badge badge-secondary "> {{listSousCategorie.length}} </span>

          </div>
          </div>
        </mat-expansion-panel>
        <ng-container>
          <mat-expansion-panel class="childPanel" [expanded]="true" hideToggle disabled style=" background:#F2EDFF;"
                               *ngFor="let j of listSousCategorie; ">
            <div class="childPanel_body2 mat-badge-large" fxLayout="row" fxFlex fxLayoutAlign="start center">
              <div style="padding-left:1em" fxFlex="grow">{{j.libelle}} {{j.id}}</div>
              <mat-form-field style="width:50px" appearance="standard">
                <form>
                  <mat-label>Note</mat-label>
                  <input type="text" matInput name="Note" [(ngModel)]="j.Note_Condidat">
                  <button type="button" (click)="onSubmit(j)"> ok</button>
                </form>
              </mat-form-field>
            </div>
          </mat-expansion-panel>
        </ng-container>
      </mat-accordion>
    </mat-expansion-panel>
  </mat-accordion>
</div>

TS 文件：

  onSubmit(sous) {
    this.LExamenSousCategorieService.updateSouCategorie(sous).then(res => {
    })
  }

标签： htmlangular

解决方案

我认为你应该给按钮“位置：相对”的父元素，并用“位置：绝对;（和边距，填充与......）”来定位按钮

推荐阅读