CSS 实现确定和取消按钮固定在底部
标题
内容
.container {
position: relative;
min-height: 100vh; /* 设置容器最小高度为视口高度 */
}
.buttons {
position: absolute;
bottom: 0; /* 将按钮定位到容器底部 */
left: 0;
right: 0;
padding: 20px; /* 添加一定的内边距以增加按钮的可点击区域 */
background-color: #f2f2f2;
display: flex;
justify-content: space-between;
}
.cancel {
background-color: #ccc;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.submit {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
解释:
- 将容器(.container)的定位设为相对(position: relative),使得按钮的绝对定位相对于容器。
- 将按钮容器(.buttons)的定位设为绝对(position: absolute),并将bottom属性设为0,使其定位到容器底部。
- 设置.buttons的左右内边距(padding)以增加按钮的可点击区域。
- 使用flex布局(display: flex)和justify-content属性将确定和取消按钮分别定位到容器的左右两侧。
- 为确定和取消按钮设置样式,使其看起来像按钮,添加背景色、颜色、内边距、边框等样式。
原文地址: https://www.cveoy.top/t/topic/nwRG 著作权归作者所有。请勿转载和采集!