-3
A
回答
1
.bar {
background-color: white;
width: 100%;
height: 20px;
}
.bar-block {
background-color: green;
display: inline-block;
width: 4%;
height: 20px;
}
.bar-block:first-child {
border-radius: 5px 0 0 5px;
}
.bar-block:last-child {
border-radius: 0 5px 5px 0;
}
.bar-block:nth-last-child(-n+4) {
background-color: #ccc;
}
.bar-block:nth-last-child(-n+3) {
background-color: #eee;
}
<div class="bar">
<div class="bar-block"></div>
<div class="bar-block"></div>
<div class="bar-block"></div>
<div class="bar-block"></div>
<div class="bar-block"></div>
<div class="bar-block"></div>
<div class="bar-block"></div>
<div class="bar-block"></div>
<div class="bar-block"></div>
<div class="bar-block"></div>
<div class="bar-block"></div>
<div class="bar-block"></div>
<div class="bar-block"></div>
<div class="bar-block"></div>
<div class="bar-block"></div>
<div class="bar-block"></div>
<div class="bar-block"></div>
<div class="bar-block"></div>
<div class="bar-block"></div>
<div class="bar-block"></div>
</div>
+0
如果它對你有幫助,請注意。 – anu
相關問題
- 1. 需要具有相同大小的餘弦相似度向量
- 2. JavaFX的滑塊反映相同的值作爲進度條
- 3. 3個相同大小的圖像具有相同的造型 - 一個看起來略有不同大小
- 4. seaborn地塊的大小相同嗎?
- 5. 更改進度條的大小
- 6. 具有相同數據的兩個MYSQL表具有不同的大小
- 7. 爲什麼具有相同數據的列表具有不同的大小?
- 8. 在libgdx中使用具有不同大小的相同字體
- 9. HTML5畫布進度條
- 10. 垂直CSS/HTML5進度條
- 11. 大塊在php中具有相同值的所有數組
- 12. 如何將大文本分成多個塊,所有塊都具有相同的最大高度?
- 13. Android圓形進度條大小
- 14. 圓形進度條大小對齊
- 15. 用Jquery更新進度條大小
- 16. 相同比特率和相同長度的MP3文件具有不同的大小
- 17. 圖像的深度學習必須具有相同的大小嗎?
- 18. 在Qt中彼此相鄰的小工具大小相同
- 19. 文本具有相同的字體大小看起來不一樣大小的
- 20. 具有相同原點的兩條線之間的角度?
- 21. HTML5音頻進度條長度
- 22. 爲什麼具有*的WPF Grid中的兩列不具有相同的大小?
- 23. swift是否具有相同的「帶塊」
- 24. 具有浮點值的進度條
- 25. 具有計時器的進度條
- 26. 具有多個操作的進度條
- 27. 座標的ArrayList都應該具有相同的大小
- 28. LinearLayout中的圖像是否必須具有相同的大小?
- 29. mongodb分片 - 塊沒有相同的大小
- 30. 具有不同水平位置的進度條的佈局
請檢查我的答案。 – anu
謝謝。它也可以。我正在嘗試使用HTML