.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  border-left: 4px solid #e6e6e6;
  padding-left: 10px;
}

.button-top,
.button-middle,
.button-bottom {
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
}

.button-top {
  background-color: #ffcccc;
}

.button-middle {
  background-color: #ffcc99;
}

.button-bottom {
  background-color: #ffcc66;
}

通过以上代码,我们可以使用 Layui 的布局组件和 CSS 样式实现用彩色竖线连接三个上下排列的按钮,并且按钮居中对齐的效果。

Layui 实现彩色竖线连接三个居中对齐按钮

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

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