Angular 单行文字的按钮图标位置

Question

如何让word和button在同一行的位置。单词应该离开，按钮应该结束

<div class="h2 secondary-text">
   Text
   <button mat-icon-button
      class="m-0 mr-16 secondary-text"
      (click)="activeModal.close('Close click')">
      <mat-icon>close</mat-icon>
   </button>
</div>

Answer 1

这可以通过使用 flex css 轻松实现。你可以试试这个

html

<div class="wrapper">
  <div class="secondary-text">
    Text
  </div>
  <div class="icon-cls">
    <button mat-icon-button
      class="m-0 mr-16 secondary-text">
      <mat-icon>close</mat-icon>
   </button>
  </div>
</div>

css

.wrapper{
  display:flex;

}

.secondary-text{
  flex: 1
}

.icon-cls{
  flex: 1;
  text-align:right;
}

Angular 单行文字的按钮图标位置

Angular button icon position with text in single line

css

position

button

angular