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步驟連接圈

回答

相關問題