如果進度欄值爲0，則不要將邊框添加到右邊

我創建了一個分組進度條來加載具有不同顏色的多個進度欄。我還在每個進度條之間加入border-right的1px。我試圖找出一個進度條是否有價值0，然後不加border-right1px，因爲現在如果值是0它會在右邊加上總共2px的邊界。我該如何解決它？如果進度欄值爲0，則不要將邊框添加到右邊

請檢查下面的示例代碼。我有第三個進度欄值0，因此它添加了2px的邊框。

https://codepen.io/Nick1212/pen/KvggVY

.well-ProgressGroup { 
 
    display: flex; 
 
    background: #d3d4d5; 
 
    flex-direction: row; 
 
    border-radius: 0.5em; 
 
    overflow: auto; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
@keyframes loadbar { 
 
    0% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    transform: translateX(0); 
 
    opacity: 1; 
 
    } 
 
} 
 

 
.well-ProgressGroup--progress { 
 
    transform: translateX(-100%) translate3d(0, 0, 0); 
 
    opacity: 0; 
 
    background: blue; 
 
} 
 

 
.well-ProgressGroup--progress:not(:last-child) { 
 
    border-right: 1px solid white; 
 
} 
 

 
.well-background--concept1 { 
 
    background: tomato; 
 
} 
 

 
.well-background--concept2 { 
 
    background: blue; 
 
} 
 

 
.well-background--concept3 { 
 
    background: purple; 
 
} 
 

 
.well-background--concept4 { 
 
    background: red; 
 
} 
 

 
.well-background--concept5 { 
 
    background: green; 
 
}

<div> 
 
    <h1 class="u-pb--lg text-bold">Grouped ProgressBar Component Examples</h1> 
 
    <div class="space"> 
 
    <div> Example: User earning all the points</div> 
 
    <div class="well-ProgressGroup"> 
 
     <!-- react-text: 94 --> 
 
     <!-- /react-text --> 
 
     <div class="well-background--concept1 well-ProgressGroup--progress" style="width: 50%; animation: 0.5s linear 0s forwards loadbar;z-index: -1; height: 50px;"></div> 
 
     <div class="well-background--concept2 well-ProgressGroup--progress" style="width: 75%; animation: 0.5s linear 0.5s forwards loadbar; z-index: -2; height: 50px;"></div> 
 
     <div class="well-background--concept3 well-ProgressGroup--progress" style="width: 0%; animation: 0.5s linear 1s forwards loadbar; z-index: -3; height: 50px;"></div> 
 
     <div class="well-background--concept4 well-ProgressGroup--progress" style="width: 250%; animation: 0.5s linear 1.5s forwards loadbar; z-index: -4; height: 50px;"></div> 
 
     <div class="well-background--concept5 well-ProgressGroup--progress" style="width: 300%; animation: 0.5s linear 2s forwards loadbar; z-index: -5; height: 50px;"></div> 
 
     <div class="well-background--concept5 well-ProgressGroup--progress" style="width: 300%; animation: 0.5s linear 2.5s forwards loadbar; z-index: -5; height: 50px;"></div> 
 
     <!-- react-text: 101 --> 
 
     <!-- /react-text --> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-08-02 User7354632781

這是在一個應用程序？您可以將寬度分配給具有內嵌寬度的元素的「data-width」屬性嗎？然後你可以使用'[data-width =「0」] {border：0; }' –

您可以使用:not([style*="width: 0"])選擇器來選擇style屬性中不包含width: 0的元素。演示：

.well-ProgressGroup { 
 
    display: flex; 
 
    background: #d3d4d5; 
 
    flex-direction: row; 
 
    border-radius: 0.5em; 
 
    overflow: auto; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
@keyframes loadbar { 
 
    0% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    transform: translateX(0); 
 
    opacity: 1; 
 
    } 
 
} 
 

 
.well-ProgressGroup--progress { 
 
    transform: translateX(-100%) translate3d(0, 0, 0); 
 
    opacity: 0; 
 
    background: blue; 
 
} 
 

 
.well-ProgressGroup--progress:not(:last-child):not([style*="width: 0"]) { 
 
    border-right: 1px solid white; 
 
} 
 

 
.well-background--concept1 { 
 
    background: tomato; 
 
} 
 

 
.well-background--concept2 { 
 
    background: blue; 
 
} 
 

 
.well-background--concept3 { 
 
    background: purple; 
 
} 
 

 
.well-background--concept4 { 
 
    background: red; 
 
} 
 

 
.well-background--concept5 { 
 
    background: green; 
 
}

<div> 
 
    <h1 class="u-pb--lg text-bold">Grouped ProgressBar Component Examples</h1> 
 
    <div class="space"> 
 
    <div> Example: User earning all the points</div> 
 
    <div class="well-ProgressGroup"> 
 
     <!-- react-text: 94 --> 
 
     <!-- /react-text --> 
 
     <div class="well-background--concept1 well-ProgressGroup--progress" style="width: 50%; animation: 0.5s linear 0s forwards loadbar;z-index: -1; height: 50px;"></div> 
 
     <div class="well-background--concept2 well-ProgressGroup--progress" style="width: 75%; animation: 0.5s linear 0.5s forwards loadbar; z-index: -2; height: 50px;"></div> 
 
     <div class="well-background--concept3 well-ProgressGroup--progress" style="width: 0%; animation: 0.5s linear 1s forwards loadbar; z-index: -3; height: 50px;"></div> 
 
     <div class="well-background--concept4 well-ProgressGroup--progress" style="width: 250%; animation: 0.5s linear 1.5s forwards loadbar; z-index: -4; height: 50px;"></div> 
 
     <div class="well-background--concept5 well-ProgressGroup--progress" style="width: 300%; animation: 0.5s linear 2s forwards loadbar; z-index: -5; height: 50px;"></div> 
 
     <div class="well-background--concept5 well-ProgressGroup--progress" style="width: 300%; animation: 0.5s linear 2.5s forwards loadbar; z-index: -5; height: 50px;"></div> 
 
     <!-- react-text: 101 --> 
 
     <!-- /react-text --> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-08-02 19:58:42

@ User7354632781很高興爲您效勞。 –

這樣做的好方法，我不知道'：不存在'。謝謝！ – Ivan

添加box-sizing: border-box;到.well-ProgressGroup。這允許你的width值也可以控制邊界。

來源

2017-08-02 19:49:46 amflare

你可以請演示如何解決這個問題？ –

你必須模擬邊界。你可以用背景漸變來做到這一點。

在這裏看到：https://codepen.io/anon/pen/WEGGKV?editors=1100

.well-ProgressGroup--progress { 
    background-image: linear-gradient(#fff, #fff), 
        linear-gradient(#fff, #fff), 
        linear-gradient(#fff, #fff), 
        linear-gradient(#fff, #fff); 
    background-position: 0 0, 100% 0, 0 0, 00; 
    background-repeat: no-repeat; 
    background-size: 0px 100%, 1px 100%, 100% 0px, 100% 0px; 
}

來源

2017-08-02 20:08:23 wicbuj

如果進度欄值爲0，則不要將邊框添加到右邊

回答

相關問題