Html 数字进度线

我尝试为我的页面创建一条进度线，如下所示：

     (1)------------(2)------------(3)------------(4)
   Step #1        Step #2        Step #3        Step #4

但我不能让我的清单上的最后一颗子弹停留在正确的位置

我编写的代码基于

ul

列表，您可以在jsfiddle上找到

我的代码如下：

.container{
填充：60px；
}
#进度容器{
保证金：0；
填充：0；
列表样式：无；
边框顶部：2个实心#999；
位置：相对位置；
边缘顶部：20px；
}
#进展容器李{
保证金：0；
填充：0；
列表样式：无；
位置：相对位置；
显示：内联块；
宽度：24%；
文本对齐：居中；
填充顶部：20px；
字体大小：16px；
颜色：#2A668A；
}
#进程容器li：：之前{
内容：“1”；
位置：绝对位置；
顶部：-20px；
左：45%；
背景：#EEB0B1；
填充物：5px12px；
字号：18px；
文本对齐：居中；
-webkit边界半径：50%；
-moz边界半径：50%；
边界半径：50%；
颜色：#FFF；
字体大小：粗体；
}
#进程容器li.active:：before{
背景：#d33434；
}
#进度容器li:第n个子项（1）{
左边缘：-12%；
}
#进度容器li:n子级（1）：：之前{
内容：“1”；
}
#进度容器li:第n个子项（2）{
左缘：6%；
}
#进度容器li:n子级（2）：：之前{
内容：“2”；
}
#进度容器li:第n个子项（3）{
左缘：6%；
}
#进度容器li:n子级（3）：：之前{
内容：“3”；
}
#进度容器li:第n个子项（4）{
保证金权利：12%；
}
#进度容器li:n子级（4）：：之前{
内容：“4”；
}

一级


二级


三级


四级

使用

*{框大小：边框框}
正文{填充：60px 0}
保险商实验室{
计数器复位：部分；
列表样式类型：无；
文本对齐：居中
}
李：以前{
反增量：节；
内容：计数器（第节“”）；
位置：绝对位置；
顶部：-60px；
左：50%；
左边距：-15px；
宽度：32px；
高度：32px；
边界半径：50%；
背景：红色；
文本对齐：居中；
线高：32px；
颜色：白色
}
li.active，li:悬停，li:悬停：之前{
颜色：#7cbee6
}
li.active:before，li:hover:before{
背景：#012e54
}
李：不是（：最后一个孩子）：之后{
内容：''；
位置：绝对位置；
顶部：-44px；
左：70像素；
宽度：40px；
高度：1px；
边框顶部：2件红色虚线
}
李{
显示：内联；
位置：相对位置；
填充：10px 14px；
}

一级


二级


三级


四级

此接缝可以完成以下操作：

我删除了左边的空白：只添加了左边：

#progress-container li:nth-child(4) {
  left: 12%;
}