堆叠的自定义进度

Question

由于我的CSS正常引导，Stacked Progress条无法正常工作，因此我开始制作自己的条，但是它们垂直堆叠而不是水平，我不确定如何解决。

这是我的意图

我已经包含了导致问题的代码，主要是css，所以我假设它只是CSS，我需要修复它

<style>
.progress {
          margin:0;
          padding:0;
          background-color:salmon;
          -moz-border-radius-topleft: 12px; 
          -moz-border-radius-topright:12px; 
          -moz-border-radius-bottomleft:12px; 
          -moz-border-radius-bottomright:12px; 
          -webkit-border-top-left-radius:12px; 
          -webkit-border-top-right-radius:12px; 
          -webkit-border-bottom-left-radius:12px;
          -webkit-border-bottom-right-radius:12px;
          border-top-left-radius:12px; 
          border-top-right-radius:12px; 
          border-bottom-left-radius:12px;
          border-bottom-right-radius:12px;
          background: repeating-linear-gradient(
                      45deg,
                      crimson,
                      crimson 10px,
                      lightsalmon 10px,
                      lightsalmon 20px
          );/*background*/
          background-size: 200% 200%;
          animation: barberpole 2s linear infinite;
 }/*.progress*/
.progress-bar {
          margin:0;
          padding:0;
          text-align:left;
          padding-left:0.5em;
          font-size: small;
          height: 1.4em;
          -moz-border-radius-topleft: 12px; 
          -moz-border-radius-topright:12px; 
          -moz-border-radius-bottomleft:12px; 
          -moz-border-radius-bottomright:12px; 
          -webkit-border-top-left-radius:12px; 
          -webkit-border-top-right-radius:12px; 
          -webkit-border-bottom-left-radius:12px;
          -webkit-border-bottom-right-radius:12px;
          border-top-left-radius:12px; 
          border-top-right-radius:12px; 
          border-bottom-left-radius:12px;
          border-bottom-right-radius:12px;
 }/*.progress-bar*/
.progress-bar-success {
          -moz-border-radius-topleft: 12px; 
          -moz-border-radius-topright:12px; 
          -moz-border-radius-bottomleft:12px; 
          -moz-border-radius-bottomright:12px; 
          -webkit-border-top-left-radius:12px; 
          -webkit-border-top-right-radius:12px; 
          -webkit-border-bottom-left-radius:12px;
          -webkit-border-bottom-right-radius:12px;
          border-top-left-radius:12px; 
          border-top-right-radius:12px; 
          border-bottom-left-radius:12px;
          border-bottom-right-radius:12px;
          background: repeating-linear-gradient(
                      45deg,
                      springgreen,
                      springgreen 10px,
                      limegreen 10px,
                      limegreen 20px
          );/*background*/
          background-size: 200% 200%;
          animation: barberpole 2s linear infinite;
 }/*.progress-bar-success*/
.progress-bar-info {
          -moz-border-radius-topleft: 0px; 
          -moz-border-radius-topright:12px; 
          -moz-border-radius-bottomleft:0px; 
          -moz-border-radius-bottomright:12px; 
          -webkit-border-top-left-radius:0px; 
          -webkit-border-top-right-radius:12px; 
          -webkit-border-bottom-left-radius:0px;
          -webkit-border-bottom-right-radius:12px;
          border-top-left-radius:0px; 
          border-top-right-radius:12px; 
          border-bottom-left-radius:0px;
          border-bottom-right-radius:12px;
          background: repeating-linear-gradient(
                      45deg,
                      cornflowerblue,
                      cornflowerblue 10px,
                      lavender 10px,
                      lavender 20px
          );/*background*/
          background-size: 200% 200%;
          animation: barberpole 2s linear infinite;
 }/*.progress-bar-info*/
@keyframes barberpole {
  100% {background-position: 100% 100%;}
}/*@keyframes barberpole*/
.desc {
          margin:0;
          padding:0;
          text-align:left;
          padding-left:0.5em;
          padding-bottom:0.5em;
          font-size: xx-small;
          font-weight:normal;
 }/*.desc*/
 </style>
      <!---------------------------------------------------------------------------------------->
      <hr style="width:100%; margin:0; margin-bottom:1em; margin-top: 1em; padding:0" />
      <!-- Cooking -->
      <div class="progress" style="text-align:left;">
        <div class="progress-bar progress-bar-success" style="width:25%;">
        <img src="../images/cooking-icon.png" style="width: 1.3em; padding-bottom:0.45em" />: 5<b class="desc">(Cooking)</b>
        </div><!-- progress-bar-success / Green -->

        <div class="progress-bar progress-bar-info" style="width:14%;">
        <i class="fas fa-tint"></i>: 6
        </div><!-- progress-bar-info / Blue -->

      </div><!-- <div class="progress"> -->

Answer 1

如果要在一行中显示嵌套的条，则只需将display: flex添加到父行的CSS属性（鲑鱼色）即可。

或者，如果您希望嵌套的条形图相互重叠，则应将父级尺寸宽度设置为100％，使用静态高度（在您的情况下为18px），并完全定位嵌套行：

.parent {
  width: 100%;
  height: 18px;
}

.child {
  position: absolute;
}