javascript - 添加填充弄乱了进度条

Question

我有以下 css 类来添加 padding: 2px 以在进度条中添加那些垂直线，但它弄乱了进度条，如图所示。我之前有 margin-left: 2px 但后来它不会在那些小垂直线中应用背景颜色白色。

.ProgressGroup--progress:not(:first-child){
  padding: 2px;
  background-color: white;
}

我该如何解决？

Answer 1

问题是填充被添加到所有边，从而弄乱了进度条。与“红色”部分相比，“蓝色”和“绿色”部分的高度不同。因此，仅向左侧和右侧添加填充不会弄乱进度条，并且还会有那些垂直线!

这可能有帮助!

.ProgressGroup--progress:not(:first-child){
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 0;
  padding-bottom: 0;
  background-color: white;
}