css 如何在Angular中将十字按钮对齐到div的最右边

wgeznvg7 于 2023-04-01 发布在 Angular

关注(0)|答案(1)|浏览(143)

我试图创建一个Angular 材料dismissible消息，我想对齐垫十字按钮的最右边的div，但我不能这样做。它总是躺在附近的消息，这里是代码

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

使用的CSS

.my-msg{
 background-color: ###;
 border: 2px solid ###;
 border-radious:8px;
 padding:5px;
 font-size:124%;
 color:blue;
 }
 
 .myContainer{
  display : flex;
  justify-content : space-between;
  align-items: center;
  }

我需要在显示的消息结束时的交叉按钮，任何帮助都表示感谢。提前感谢。

css

来源：https://stackoverflow.com/questions/75880891/how-to-align-a-mat-cross-button-to-the-right-most-of-a-div-in-angular

1条答案

按热度按时间

dzjeubhm1#

在HTML/CSS中有很多控制对齐的方法，你也可以参考StackOverflow上成千上万的现有示例。这里是我想到的前三个，从最好到最差的顺序（在我看来）：

.container1{
  display: flex;
}

.container1 > span{
  flex: 1;
}

.container2{
  position: relative;
  width: 100%;
}

.container2 > button{
  position: absolute;
  right: 0px;
}

.container3{
  display: block;
}

.container3 > button{
  float: right;
}

<div class="container1">
  <span>some text</span>
  <button>
    A button
  </button>
</div>

<div class="container2">
  <span>some text</span>
  <button>
    A button
  </button>
</div>

<div class="container3">
  <span>some text</span>
  <button>
    A button
  </button>
</div>

我还将注意到，您的原始代码（至少是CSS）中有许多错误，您应该考虑清理。

赞(0）回复(0）举报 2023-04-01

我来回答

css 如何在Angular中将十字按钮对齐到div的最右边

1条答案

相关问题

热门标签

最新问答