进度停止看起来破碎答案

【问题标题】：Progress stops look broken进度停止看起来破碎
【发布时间】：2014-08-04 18:16:29
【问题描述】：

进度停止看起来坏了

我试过了：

左边框：5px 纯色透明
设置停止以较高的 z-index

.progress-cir {
  background: #fff;
  display: block;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  margin: 0 -11px;
  z-index: 10;
  border: 5px solid #f3f0e9; }

.progress-rec {
  background: #fff;
  display: block;
  height: 14px;
  width: 67px;
  display: inline-block;
  position: relative;
  top: -8px;
  border-top: 5px solid #f3f0e9;
  border-bottom: 5px solid #f3f0e9;
  left: 0px;
  z-index: 20; }

.progress-active {
  background: #1e79c3 !important; }

【问题讨论】：

尝试为您的活动课程添加边距：0 -9px。 jsfiddle.net/7HU5b/1
我更新了我的 jsFiddle，以更好地展示我将如何使用这个进度条。你的想法很好，但它不会奏效。还是谢谢你！

标签： css progress-bar z-index layer

【解决方案1】：

这些都不是非常安全的，但你可以通过以下方式得到你想要的：http://codepen.io/pageaffairs/pen/aGeok

我在这里所做的只是将一些::after 代码添加到水平条中。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

.progress-cir {
  background: #fff;
  display: block;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  margin: 0 -11px;
  z-index: 10;
  border: 5px solid #f3f0e9; 
}

.progress-rec {
  background: #fff;
  display: block;
  height: 14px;
  width: 67px;
  display: inline-block;
  position: relative;
  top: -8px;
  border-top: 5px solid #f3f0e9;
  border-bottom: 5px solid #f3f0e9;
  left: 0px;
  z-index: 20; 
}

.progress-active {
  background: #1e79c3 !important; 
}

.progress-active + .progress-rec::after {
    content: "";
    position: absolute;
    left: -28px;
    top: -8px;
    height: 14px;
    width: 30px; 
    height: 30px;
    background: #1e79c3;
    border-radius: 50%;
}

</style>
</head>
<body>

<a class="progress-cir progress-active"></a>
<a class="progress-rec progress-active"></a>
<a class="progress-cir progress-active"></a>
<a class="progress-rec"></a>
<a class="progress-cir"></a>
<a class="progress-rec"></a>
<a class="progress-cir"></a>

</body>
</html>

【讨论】：

完美！非常感谢拉尔夫！