进度线与数字

Question

我尝试为我的页面创建一个如下所示的进度行：

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

但是我无法将我列表中的最后一颗子弹设置为非常正确。

我编写的代码基于ul列表，您可以在jsfiddle上找到 sample code 。

我的代码如下：

＆＃13;

＆＃13;

.container {
  padding: 60px;
}
#progress-container {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid #999;
  position: relative;
  margin-top: 20px;
}
#progress-container li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  display: inline-block;
  width: 24%;
  text-align: center;
  padding-top: 20px;
  font-size: 16px;
  color: #2A668A;
}
#progress-container li::before {
  content: '1';
  position: absolute;
  top: -20px;
  left: 45%;
  background: #EEB0B1;
  padding: 5px 12px;
  font-size: 18px;
  text-align: center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  color: #FFF;
  font-weight: bold;
}
#progress-container li.active::before {
  background: #d33434;
}
#progress-container li:nth-child(1) {
  margin-left: -12%;
}
#progress-container li:nth-child(1)::before {
  content: '1';
}
#progress-container li:nth-child(2) {
  margin-left: 6%;
}
#progress-container li:nth-child(2)::before {
  content: '2';
}
#progress-container li:nth-child(3) {
  margin-left: 6%;
}
#progress-container li:nth-child(3)::before {
  content: '3';
}
#progress-container li:nth-child(4) {
  margin-right: 12%;
}
#progress-container li:nth-child(4)::before {
  content: '4';
}

＆＃13;

<div class="container">
  <ul id="progress-container">
    <li class="active">
      Level #1
    </li>
    <li>
      Level #2
    </li>
    <li>
      Level #3
    </li>
    <li>
      Level #4
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

注意：JsFiddle中的代码是当前需要更正的代码。如果您对如何解决视觉问题有任何建议，请提供帮助，或者如果您有任何其他方法，请告诉我：）

更新

如果有人对该功能感兴趣，那么代码就在这里：

＆＃13;

＆＃13;

#progress-container.horizontal {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid #999;
  position: relative;
}

#progress-container.horizontal li {
  margin: 0;
  padding: 20px 0 0;
  list-style: none;
  position: relative;
  display: inline-block;
  width: 24%;
  text-align: center;
  font-size: 16px;
  color: #2A668A;
}

#progress-container.horizontal li::before {
  content: '1';
  position: absolute;
  top: -20px;
  left: 41%;
  background: #EEB0B1;
  padding: 5px 12px;
  font-size: 18px;
  text-align: center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  color: #FFF;
  font-weight: bold;
}

#progress-container.horizontal li.active::before {
  background: #d33434;
}

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

#progress-container.horizontal li:nth-child(1)::before {
  content: '1';
}

#progress-container.horizontal li:nth-child(2) {
  left: -3%;
}

#progress-container.horizontal li:nth-child(2)::before {
  content: '2';
}

#progress-container.horizontal li:nth-child(3) {
  left: 5%;
}

#progress-container.horizontal li:nth-child(3)::before {
  content: '3';
}

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

#progress-container.horizontal li:nth-child(4)::before {
  content: '4';
}

#progress-container.vertical {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid #999;
  position: relative;
}

#progress-container.vertical li {
  margin: 0 0 25px;
  padding: 0 0 0 50px;
  list-style: none;
  position: relative;
  font-size: 16px;
  color: #2A668A;
  display: block;
  left: -18px;
}

#progress-container.vertical li::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 0;
  background: #EEB0B1;
  padding: 5px 12px;
  font-size: 18px;
  text-align: center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  color: #FFF;
  font-weight: bold;
}

#progress-container.vertical li.active::before {
  background: #d33434;
}

#progress-container.vertical li:nth-child(1)::before {
  content: '1';
}

#progress-container.vertical li:nth-child(2)::before {
  content: '2';
}

#progress-container.vertical li:nth-child(3)::before {
  content: '3';
}

#progress-container.vertical li:nth-child(4)::before {
  content: '4';
}

＆＃13;

<ul id="progress-container" class="horizontal hidden-xs">
    <li class="active">
        Step 1
    </li>
    <li>
        Step 2
    </li>
    <li>
        Step 3
    </li>
    <li>
        Step 4
    </li>
</ul>
<ul id="progress-container" class="vertical visible-xs">
    <li class="active">
        Step 1
    </li>
    <li>
        Step 2
    </li>
    <li>
        Step 3
    </li>
    <li>
        Step 4
    </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用CSS counters

*{box-sizing: border-box}
body{padding: 60px 0}

ul {
  counter-reset: section; 
  list-style-type: none;
  text-align: center
}
li:before {
  counter-increment: section;
  content: counters(section,"");
  position: absolute;
  top: -60px;
  left: 50%;
  margin-left: -15px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: red;
  text-align: center;
  line-height: 32px;  
  color: white
}
li.active, li:hover, li:hover:before{
    color: #7cbee6
}
li.active:before, li:hover:before{
    background: #012e54
}
li:not(:last-child):after{
    content: '';
    position: absolute;
    top: -44px; 
    left: 70px;
    width: 40px;
    height: 1px;
    border-top:2px dashed red
}
li{
    display: inline;
    position: relative;
    padding: 10px 14px;
}

<div class="container">
    <ul id="progress-container">
        <li class="active">
            Level #1
        </li>
        <li>
            Level #2
        </li>
        <li>
            Level #3
        </li>
        <li>
            Level #4
        </li>
    </ul>
</div>

Answer 2

这种缝可以做到这一点： http://jsfiddle.net/3kngwfgf/2/

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

我删除了左边距：刚添加左边：