带有单行文本的角按钮图标位置

Question

如何在同一行上为单词和按钮定位。应保留单词，按钮应在末尾

<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;
}