设置表单向导的样式

Question

是否可以在HTML5和CSS3中编写类似下面的内容？

我可以很好地使用里面的数字做圆圈，但我不知道怎么去连接步骤的线/路？

Markup我想到的是：

<ul>
    <li><span>1</span></li>
    <li><span>2</span></li>
    <li><span>3</span></li>
    <li><span>4</span></li>
</ul>

Answer 1

是的，这是可能的。 JSFiddle demo

HTML

我只是使用以下标记，而不是将数字包装在span个元素中：

<ul class="steps">
    <li class="active">1</li>
    <li class="active">2</li>
    <li>3</li>
    <li>4</li>
</ul>

然后我使用:before伪元素在每个li之前插入该行，除了第一个之外：

CSS

ul.steps {
    background: tomato;
    display: block;
    list-style-type: none;
    padding: 10px;
    width: 300px;
}

ul.steps li {
    border-radius: 42%;
    background: #DB4024;
    color: #FFB3B3;
    display: inline-block;
    height: 32px;
    line-height: 32px;
    margin-right: 53px;
    position: relative;
    text-align: center;
    width: 32px;
}

ul.steps li:last-child {
    margin-right: 0;
}

ul.steps li:before {
    background: #DB4024;
    content: '';
    display: block;
    height: 10px;
    right: 30px;
    position: absolute;
    top: 11px;
    width: 59px;
}

ul.steps li:first-child:before {
    display: none;
}

然后我给它.active样式（使背景变白并且颜色变黑）：

ul.steps li.active, ul.steps li.active:before {
    background: #fff;
    color: #333;
}

注意：

1. 在这个例子中，我使用了固定宽度值。 ul和li宽度以及li边距和位置偏移量需要相应调整。
2. class="active"需要添加到所有突出显示的li元素中，而不仅仅是当前元素。
3. li元素不是完美的圆圈，因为线条必须在平坦的边缘上相遇。

Answer 2

以下是解决此类问题的一种方法：

演示：http://jsfiddle.net/2z2QA/

CSS：

ul
{
    list-style: none;
    margin:0;
    padding:0;
    overflow: hidden;
}

ul li
{
    float: left;
    width: 25%;
    position: relative;
}

ul li span
{
    display: inline-block;
    padding: 5px 12px;
    border-radius: 100px;
    background-color: darkgreen;
    color: lightgreen;
}

ul li.done span,
ul li.active  span
{
    background-color: silver;
    color: gray;
}

ul li.done:after
{
    content:"";
    position: absolute;
    left:10px;
    right:-10px;
    height: 5px;
    background-color: gray;
    top: 50%;
    margin-top: -2.5px;
    z-index:-1;
}

HTML：

<ul>
    <li class="done"><span>1</span></li>
    <li class="active"><span>2</span></li>
    <li><span>3</span></li>
    <li><span>4</span></li>
</ul>