html - 如何对齐对话框角材料内右上角的按钮？

Question

我想在对话框角材料内的右上角对齐按钮。问题是我在按钮和对话框角落之间有一些空间，我不想要它。

这是我的html代码：

 <button #btnClose mat-button class="close" data-dismiss="modal" aria-label="Close">
   <span aria-hidden="true">&times;</span>
 </button>

这是我的CSS代码：

.close {
  color: black;
  opacity: 1;
  max-width: 2vw !important;
  min-width: 2vw !important;
}

我可以在 css 中用边距做一些“技巧”，但我认为这是个坏主意：

.close {
  color: black;
  opacity: 1;
  max-width: 2vw !important;
  min-width: 2vw !important;
  margin: -1.2vw -1.2vw;
}

然后我得到了我想要的：

有更好的解决方案吗？PS：它必须是响应式的。

标签： htmlcssangularangular-material

Answer 1

如果要对齐右上角的内容，可以使用：

.close {
  position: absolute;
  top: 0;
  right: 0;
}