Question

我正在尝试仅使用html和css创建进度条，如果进度条发生变化，我无法使图像移动。例如，如果我将其设置为25％，50％，75％，我希望在进度范围的末尾有一个点。

这是我的HTML代码：

<div class="progress">
  <div class="progress-bar">
    <img src="http://placehold.it/10x10">
  </div>
</div>

这是我的CSS：

.progress {
  height:2px;
  width:300px;
  background-color: gray;
  position: relative;
}

.progress-bar {
  height:2px;
  width:20%;
  position: absolute;
  background-color: red;
}

.progress-bar img {
  position: absolute;  
}

我在哪里弄错了？

Answer 1

我为一个旧项目做了这个，它工作得很好！

#pourcentage {
    width:100px;
    padding:2px;
    background-color:white;
    text-align:center;
    height: 20px;
}
#indicatorValid {
    background-color: #2ecc71;
    text-align: center;
    color: white;
    height: 20px;
    float: left;
}
#indicatorErreur {
    background-color:#E44C41;
    text-align: center;
    color: white;
    height: 20px;
    float: right;
}

  <div id='pourcentage'>
    <div style='width:50px;' id='indicatorValid'>50 %</div>
    <div style='width:50px;' id='indicatorErreur'>50 %</div>
  </div>

http://jsfiddle.net/53Dnd/

Answer 2

<强> DEMO

.progress {
  height:2px;
  width:300px;
  background-color: gray;
  position: relative;
}

.progress-bar {
  height:2px;
  width:40%;
  position: absolute;
  background-color: red;
}

.progress-bar img {
  position: absolute;
  left: 100%:
}

将图片设为left:100%

进度条只有html和css

2 个答案: