关于html:如何在右下角放置”取消”按钮?

How to put the cancel button on the bottom right?

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

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


您可以将此CSS添加到按钮

1
2
3
4
5
button{
  position: absolute;
  right: 10px;
  bottom:  10px;
}

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


这将适用于任何分辨率,

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

并使用css

1
2
3
4
5
.rightbottom {
  position: absolute;
  right: 10%;
  bottom: 15%;
}

1
2
3
4
5
.rightbottom {
  position: absolute;
  right: 10%;
  bottom: 15%;
}
1
2
3
4
5
<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>


如果您正在使用引导程序(假设您正在使用引导程序),请尝试以下代码:

1
2
3
4
5
6
7
8
9
10
11
<html>
    <head>
      Button to the right
      <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
    </head>
    <body>

<button class ="btn btn-secondary float-right my-2" (click)="close()">Cancel</button>

</body>
</html>