Sử dụng css calc() với bước

Question

Chúng tôi đã sử dụng thanh tiến trình cơ bản css thuần túy.

Phần css chính như sau.

.container { 
    width: 600px; 
    margin: 20px auto; 
} 

.progressbar { 
    margin: 0; 
    padding: 0; 
    counter-reset: step; 
} 

.progressbar li { 
    list-style-type: none; 
    width: 25%; 
    float: left; 
    font-size: 12px; 
    position: relative; 
    text-align: center; 
    text-transform: uppercase; 
    color: #7d7d7d; 
} 

.progressbar li:before { 
    width: 30px; 
    height: 30px; 
    content: counter(step); 
    counter-increment: step; 
    line-height: 30px; 
    border: 2px solid #7d7d7d; 
    display: block; 
    text-align: center; 
    margin: 0 auto 10px auto; 
    border-radius: 50%; 
    background-color: white; 
} 

.progressbar li:after { 
    width: 100%; 
    height: 2px; 
    content: ''; 
    position: absolute; 
    background-color: #7d7d7d; 
    top: 15px; 
    left: -50%; 
    z-index: -1; 
} 

............... 

Các html

<div class="container"> 
    <ul class="progressbar"> 
    <li class="active">login</li> 
    <li>choose interest</li> 
    ........ 

mẫu Toàn bộ có thể được tìm thấy tại https://jsfiddle.net/wbj7e79p/.

Như bạn có thể thấy nó lộn xộn trong bảy bước. Lý do là .progressbar li width được sửa thành 25% chúng tôi muốn biến nó thành cơ sở động dựa trên số bước.

Vì vậy, chúng tôi đã thử chiều rộng: calc (100%/steps) hoặc calc (100%/counter(steps)) nhưng không ai trong số họ làm việc. Bất kỳ ý tưởng !

---

Hãy xem xét rằng chúng tôi đang xây dựng một thành phần mà xây dựng một thanh tiến trình một cách nhanh chóng, vì vậy chúng tôi không thể tìm thấy con số thực tế các bước

Answer 1

Bạn có xem xét flexbox?

body { 
 
    font-family: 'Alegreya Sans', sans-serif; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.container { 
 
    margin: 20px auto; 
 
} 
 
.progressbar { 
 
    margin: 0; 
 
    padding: 0; 
 
    counter-reset: step; 
 
    display: flex; 
 
} 
 
.progressbar li { 
 
    list-style-type: none; 
 
    flex: 1; 
 
    font-size: 12px; 
 
    position: relative; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    color: #7d7d7d; 
 
} 
 
.progressbar li:before { 
 
    width: 30px; 
 
    height: 30px; 
 
    content: counter(step); 
 
    counter-increment: step; 
 
    line-height: 30px; 
 
    border: 2px solid #7d7d7d; 
 
    display: block; 
 
    text-align: center; 
 
    margin: 0 auto 10px auto; 
 
    border-radius: 50%; 
 
    background-color: white; 
 
} 
 
.progressbar li:after { 
 
    width: 100%; 
 
    height: 2px; 
 
    content: ''; 
 
    position: absolute; 
 
    background-color: #7d7d7d; 
 
    top: 15px; 
 
    left: -50%; 
 
    z-index: -1; 
 
} 
 
.progressbar li:first-child:after { 
 
    content: none; 
 
} 
 
.progressbar li.active { 
 
    color: green; 
 
} 
 
.progressbar li.active:before { 
 
    border-color: #55b776; 
 
} 
 
.progressbar li.active + li:after { 
 
    background-color: #55b776; 
 
}

<h1>Four Steps</h1> 
 
<div class="container"> 
 
    <ul class="progressbar"> 
 
    <li class="active">login</li> 
 
    <li>choose interest</li> 
 
    <li>add friends</li> 
 
    <li>View map</li> 
 
    </ul> 
 
</div> 
 
<h1> Seven Steps</h1> 
 

 
<div class="container"> 
 
    <ul class="progressbar"> 
 
    <li class="active">login</li> 
 
    <li>choose interest</li> 
 
    <li>add friends</li> 
 
    <li>remove</li> 
 
    <li>fix users</li> 
 
    <li>review</li> 
 
    <li>save all</li> 
 
    </ul> 
 
</div>