Question

我正在构建带有标签的进度条，但是我面临两个问题。

我需要标签 6 在进度条的末尾对齐，如上图所示。

各自的代码：

    .lables{
        display:flex;
        justify-content: space-around;
        color:white;
        background-color:white;
    }

我认为

justify-content：flex-end;

和

margin-left：calc（l00％/ 6-每个标签的宽度）;

可能会工作，但我不知道如何实现此目标，或者是否有更好的解决方案。

尝试使进度条的两端都变圆，导致整个进度条变成一个圆。如何实现如上图所示的圆角边框？

整个html文件：

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>skill bar</title>
    </head>

<!-- style -->
    <style>
        .container{
            max-width:790px;
            margin: 0 auto;
        }
        .progress{
            width: 100%;
            background-color: dimgray;
        }
        .progress-bar{
            width:0;
            height: 10px;
            background-color:limegreen;
        }
        .lables{
            display:flex;
            justify-content: space-around;
            color:white;
            background-color:white;
        }
        .lables > div{
            background-color:dimgray;
            text-align: center;
            padding:10px;
            margin:12px;
            border-radius: 6px;
        }
    </style>

<!-- HTML -->
    <body>
        <div class="container">

            <div class="progress">
                <div class="lables">
                    <div> 1</div>
                    <div> 2</div>
                    <div> 3</div>
                    <div> 4</div>
                    <div> 5</div>
                    <div> 6</div>
                </div>
                <div class="progress-bar"></div>
            </div>
            <br>
            <button onclick="move()">Click Me</button>
        </div>

<!-- Javascript -->
        <script>
            function move(){
                const element = document.querySelector('.progress-bar');
                let width = 0;
                let id = setInterval(frame, 20);

                function frame(){
                    if(width>= 100){
                        clearInterval(id);
                    }else{
                        width++;
                        element.style.width = width + "%";
                    }
                }
            }
        </script>

    </body>

Answer 1

对于第一点，您可能会寻找justify-content: space-around，而不是使用justify-content: space-between。如果希望它进一步移动（到边缘），请使用margin: 12px，而不是margin: 12px 0。我在示例中使用了它。

第二点，在.progress-bar上添加边框很容易，但是.progress本身要困难一些。我建议稍加重组，以便进度条的初始状态和指示器都包含在容器中。容器将具有position: relative，两个子元素将具有position: absolute。在这里，您只需设置一个border-radius。

这可以在下面看到：

function move() {
  const element = document.querySelector('.progress-bar');
  let width = 0;
  let id = setInterval(frame, 20);

  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++;
      element.style.width = width + "%";
    }
  }
}

.container {
  max-width: 790px;
  margin: 0 auto;
}

.progress-container {
  position: relative;
}

.progress, .progress-bar {
  height: 10px;
  border-radius: 10px;
  position: absolute;
}


.progress {
  width: 100%;
  background-color: dimgray;
}

.progress-bar {
  width: 0;
  background-color: limegreen;
}

.lables {
  display: flex;
  justify-content: space-between;
  color: white;
  background-color: white;
}

.lables>div {
  background-color: dimgray;
  text-align: center;
  padding: 10px;
  /*margin: 12px;*/
  margin: 12px 0;
  border-radius: 6px;
}

<body>
  <div class="container">
    <div>
      <div class="lables">
        <div> 1</div>
        <div> 2</div>
        <div> 3</div>
        <div> 4</div>
        <div> 5</div>
        <div> 6</div>
      </div>
      <div class="progress-container">
        <div class="progress"></div>
        <div class="progress-bar"></div>
      </div>
    </div>
    <br>
    <button onclick="move()">Click Me</button>
  </div>
</body>

建立带有标签的进度栏

1 个答案: