添加填充搞亂進度條

我有以下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

添加填充搞亂進度條

回答

相關問題