添加填充搞乱进度条

Question

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

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

我该如何解决？

Answer 1

如果您使用div，那么您可以使用以下方法获取它，使用margin代替padding来获取其他人的空间。

下面我发布了一个例子，希望它会对你有帮助。

＆＃13;

＆＃13;

.bigbox {
  width: 500px;
  border: 1px solid;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
  overflow:hidden;
}

.innerbox {
  flex: 1;
  margin: 0px 2px;
  min-height: 25px;
  background:tomato;
}
.innerbox:nth-child(1) {
  background:black;
}
.innerbox:nth-child(2) {
  background:red;
}
.innerbox:first-child, .innerbox:last-child {
  margin:0;
}

＆＃13;

<div class="bigbox">
  <div class="innerbox"></div>
  <div class="innerbox"></div>
  <div class="innerbox"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

这可能有所帮助！

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