CSS步骤连接圈

我试图做某种只能用CSS连接的步骤，到目前为止，我成功地完成这件事：CSS步骤连接圈

但我需要去除多余的线在哪里红色是。

<ul class="step"> 

    <li class="first"> 
     <span>1</span> 
    </li> 
    <li class="second"> 
     <span>2</span> 
    </li> 
    <li class="third"> 
     <span>3</span> 
    </li> 
    <li class="last"> 
     <span>4</span> 
    </li> 
</ul> 

section.steps .steps-box .steps-container ul.step{ 
    margin: 0; 
    list-style: none; 
    border-top: 1px dotted #000; 
} 
section.steps .steps-box .steps-container ul.step > li{ 
    float: left; 
    width: 25%; 
    margin-top: -40px; 
    padding: 0 10px; 
} 
section.steps .steps-box .steps-container ul.step li span{ 
    display: block; 
    margin: 0 auto; 
    height: 80px; 
    width: 80px; 
    line-height: 80px; 
    border-radius: 80px; 
    border: 1px solid; 
    overflow: hidden; 
    text-align: center 
}

我需要的是一个从1到只有4行，但我无法弄清楚如何做到这一点，而不使用的图像，可以有人请帮助？

预先感谢您！

来源

2017-08-02 Emilio Venegas Navarrete

添加一个具有正确宽度和高度的容器以包含所有圆圈并使用'overflow：hidden'属性。这将隐藏容器外的所有子元素 – Ivan

可以创建小提琴吗？ – ajc

试图用不同的方法来实现这一点，并不总是一个列表是最好的布局。即：

<div class="connected-steps"> 
    <div class="step">1</div> 
    <div class="connector"></div> 
    <div class="step">2</div> 
    <div class="connector"></div> 
    <div class="step">3</div> 
</div>

然后用容器上display:flex，让.connector增长填写.step之间的空间。

.connected-steps { 
    display: flex; 
    width: 100%; 
    align-items: center; 
} 

.step { 
    color: white; 
    background-color: red; 
    display: block; 
    border-radius: 10px; 
    width: 20px; 
    height: 20px; 
    text-align: center; 
    line-height: 20px; 
} 

.connector { 
    flex-grow: 1; //fill the space 
    width: 10px; 
    content: ""; 
    display: block; 
    height: 1px; 
    background-color: red; 
}

这里是工作示例：https://codepen.io/bondartrq/pen/QOKxGR

这是充分响应，你可以与容器反转的顺序和方向的弯曲特性发挥...

祝你好运！

来源

2017-11-07 15:27:15 RobertQ

CSS步骤连接圈

回答

相关问题