Question

我试图在我的进度条上添加线条以显示里程碑，并且我在完成它时遇到了一些麻烦。似乎总有一个偏差，我无法弄清楚它有什么问题。下面的进度条设置为40％，第一个里程碑为40％，但是如此偏移，如果你看100，它甚至不在进度条上。我需要一种方法来做到这一点。有什么建议吗？

＆＃13;

.progress-checkpoint {
    float: left;
    position: absolute;
    background-color: red;
    width: 1px;
    height: 29px;
    margin-top: -5px;
    color: black;
    overflow: visible;
}
.progress-checkpoint>div {
    margin-left: -19px;
    margin-top: -19px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div style="padding:50px">
  
  
  <div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 40%"><div class="progress-checkpoint" style="left: 40%;">
    <div>40</div>
    </div><div class="progress-checkpoint" style="left: 53%;">
    <div>53</div>
    </div><div class="progress-checkpoint" style="left: 67%;">
    <div>67</div>
    </div><div class="progress-checkpoint" style="left: 88%;">
    <div>88</div>
    </div><div class="progress-checkpoint" style="left: 100%;">
    <div>100</div>
    </div>        </div>
</div>
  
  
  
  </div>

＆＃13;

Answer 1

您的进度条已正确对齐。问题是.progress-checkpoint元素的绝对定位。您在position:relative上遗漏了.progress，因此绝对定位确实从正确的点开始。

将以下内容添加到CSS中以使其正常工作

.progress {
  position:relative;
}

此外，您需要从overflow:hidden元素中删除.progress，这样您的文字标记才不会被截断。

进度条似乎被抵消

1 个答案: