问进度条似乎被抵消了
EN

Stack Overflow用户

提问于 2016-10-06 15:44:09

回答 1查看 984关注 0票数 0

我试图在我的进度条上添加行以显示里程碑，而且我在实现它的完美方面遇到了一些困难。似乎总是有一个偏移，我不知道它有什么问题。下面的进度条设置为40%，第一个里程碑是40%，但是它的偏移量很大，如果您查看100，它甚至不在进度栏上。我需要一个办法让这件事变得准确。有什么建议吗？

.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;
}

<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>

css

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-10-06 15:50:51

你的进度条是正确对齐的。问题是.progress-checkpoint元素的绝对定位。您缺少了position:relative on .progress，所以绝对定位确实从正确的位置开始。

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

.progress {
  position:relative;
}

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

票数 6

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39900356

复制

相似问题

问进度条似乎被抵消了
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问进度条似乎被抵消了EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问进度条似乎被抵消了
EN