如何将取消按钮放在右下角？答案

【问题标题】：How to put the cancel button on the bottom right?如何将取消按钮放在右下角？
【发布时间】：2020-08-30 12:38:07
【问题描述】：

我将此代码用于“取消”按钮。如何使取消按钮位于屏幕的右下角。

    <button class = "btn btn-secondary margin-r-10" (click)="close()">
    Cancel
    </button>

【问题讨论】：

分享你之前尝试过的代码
如果您满意，请在下面查看我的答案，然后标记此答案..

标签： html angular typescript

【解决方案1】：

您可以将此css 添加到按钮

button{
  position: absolute;
  right: 10px;
  bottom:  10px;
}

演示https://stackblitz.com/edit/angular-ivy-rqnqtu

【讨论】：

【解决方案2】：

这适用于任何分辨率，

在按钮中添加更多类这是类rightbottom

并使用 css

.rightbottom {
  position: absolute;
  right: 10%;
  bottom: 15%;
}

.rightbottom {
  position: absolute;
  right: 10%;
  bottom: 15%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>

<button class="btn btn-secondary margin-r-10 rightbottom" (click)="close()">
  Cancel
</button>

【讨论】：

【解决方案3】：

如果您使用的是引导程序，（我假设您是），请尝试以下代码：

<html>
    <head>
      <title>Button to the right</title>
      <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
    </head>
    <body>
<div class="container-fluid">
<button class = "btn btn-secondary float-right my-2" (click)="close()">Cancel</button>
</div>
</body>
</html>

【讨论】：