标题

内容

.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属性将确定和取消按钮分别定位到容器的左右两侧。
  • 为确定和取消按钮设置样式,使其看起来像按钮,添加背景色、颜色、内边距、边框等样式。
CSS 实现确定和取消按钮固定在底部

原文地址: https://www.cveoy.top/t/topic/nwRG 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录