如何在进度条中添加标记？

Question

如何在进度条中添加标记？

3

我有一个进度条，我想在某些点上添加标记（我在JavaScript中确定位置并以编程方式设置'left'属性）。当JS代码运行后，我最终得到如下内容：

.marker {
    width:2px;
    background-color:#f00;
    position:relative;
}

<!-- div for a progress bar here -->
<div>
 --- progress bar here --- --- progress bar here --- --- progress bar here ---
</div>

<!-- div for markers here -->
<div>
  <div class="marker" style='left:0%;'>&nbsp;</div>
  <div class="marker" style='left:10%;'>&nbsp;</div>
  <div class="marker" style='left:20%;'>&nbsp;</div>
  <div class="marker" style='left:30%;'>&nbsp;</div>
  <div class="marker" style='left:40%;'>&nbsp;</div>
  <div class="marker" style='left:50%;'>&nbsp;</div>
  <div class="marker" style='left:60%;'>&nbsp;</div>
  <div class="marker" style='left:100%;'>&nbsp;</div>
</div>

我能看到红色标记在进度条下面正确的相对位置，但我希望它们都在同一水平线上重叠在一起。

理想情况下，我希望它们位于进度条的顶部。

- Mark M

1

更改为绝对定位，将父元素相对于设置的参考点定位，并为标记指定适当的“top”值。 - CBroe

1

有更简单的替代方案。<input type="progress"/> 得到广泛支持。 - r3mainer

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sheriffderek · Accepted Answer

这是一种方法： https://jsfiddle.net/sheriffderek/qe3rmmd4/ - 然而，我希望现在使用canvas或svg来完成这样的工作。

.progress-bar {
  position: relative;
  width: 100%;
  height: 40px;
  max-width: 200px;
  background: gray;
}

.bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 23%;
  height: 100%;
  background: blue;
}

.marker-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.marker-list .marker {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background-color: red;
}

<div class='progress-bar'>

  <div class="bar"></div>

  <ul class="marker-list">
    <li class="marker" style='left:10%;'></li>
    <li class="marker" style='left:20%;'></li>
    <li class="marker" style='left:30%;'></li>
    <li class="marker" style='left:40%;'></li>
    <li class="marker" style='left:50%;'></li>
    <li class="marker" style='left:60%;'></li>
    <li class="marker" style='left:70%;'></li>
    <li class="marker" style='left:80%;'></li>
    <li class="marker" style='left:90%;'></li>
  </ul>

</div>