Angular中如何将Mat十字按钮对齐到Div最右侧？

你的代码里有两个关键问题导致按钮无法对齐到最右侧，直接修改如下即可：

1. 修正按钮属性语法错误 #

你写的 mat-icon-button-class="close-button" 是错误写法，Angular Material 的 mat-icon-button 是独立指令，class 属性需要单独声明：

<button mat-icon-button class="close-button" (click)="show()">

2. 调整Flex布局结构 #

你当前的 .myContainer 仅包含一个子元素（包裹文本和按钮的div），justify-content: space-between 无法生效。需要把文本和按钮设为 .myContainer 的直接子元素，让flex布局规则起作用。

修正后的完整代码 #

HTML 部分

<div *ngIf="isTrue" class="my-msg">
  <div class="myContainer" *ngIf="isAdded">
    <span> Some text</span>
    <button mat-icon-button class="close-button" (click)="show()">
      <mat-icon>close</mat-icon>
    </button>
  </div>
</div>

CSS 部分（修正拼写错误并优化）

.my-msg{
  background-color: #eee; /* 替换为你实际需要的颜色值 */
  border: 2px solid #ccc; /* 替换为你实际需要的颜色值 */
  border-radius: 8px; /* 修正原拼写错误 border-radious */
  padding: 5px;
  font-size: 124%;
  color: blue;
}

.myContainer{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 可选：如果希望按钮与文本间距更大，可添加此样式 */
.close-button {
  margin-left: auto;
}

内容的提问来源于stack exchange，提问作者Jeet