html - 样式表单向导

有可能在HTML5和CSS3中编写如下代码吗？
我能很好地把里面的数字画成圆圈，但是我不知道怎么走连接台阶的线/路？
我想的是：

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

最佳答案

是的，这是可能的。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;
}

笔记：
在本例中，我使用了固定宽度值。您需要相应地调整ul和li宽度以及li边距和位置偏移。
class="active"将需要添加到所有突出显示的li元素中，而不仅仅是当前元素。
li元素不是完美的圆，因为线必须在平边上与它们相交。

关于html - 样式表单向导，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23912988/