添加填充搞乱进度条

我有以下css类来添加padding: 2px添加这些垂直线进度条，但它搞乱了进度条，你可以在图像中看到。我早先有margin-left: 2px，但它不会在这些小垂直线上应用背景颜色白色。添加填充搞乱进度条

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

我该如何解决呢？

来源

2017-07-14 User7354632781

向我们展示了HTML请，如果可能创建一个堆栈 - 摘录 –

也许您只需要添加水平填充，比如'填充：0 2px'？但是，是的，如果您创建一个[功能示例]（https://stackoverflow.com/help/mcve）来演示该问题，将会有所帮助。 – showdev

谢谢@showdev我试图修复它，但第二行中的空白看起来比第一行更大。任何想法为什么？ – User7354632781

如果您使用的是div，那么您可以通过使用以下方法得到它，使用margin而不是padding来获得彼此的空间。

下面我张贴了一个例子，希望它能帮助你。

.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; 
 
}

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

来源

2017-07-14 17:14:30 LKG

问题是填充被添加到所有的侧面，从而搞乱进度条。 “蓝色”&“绿色”部分与“红色”部分相比高度不同。因此，仅将填充添加到左侧和右侧不会混淆进度条，并且也会具有这些垂直线条！

这可能有帮助！

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

来源

2017-07-14 17:20:44

添加填充搞乱进度条

回答

相关问题