簡單多個步驟

Question

JSfiddle DEMO

HTML

<div id="status-buttons" class="text-center"> 
    <a href="/1"><span>1</span></a> 
    <a href="/2"><span>2</span></a> 
    <a href="/3"><span>3</span></a> 
</div> 

CSS

#status-buttons a { 
    display:inline-block; 
    font-size: 22px; 
    margin-right: 20px; } 
    #status-buttons a span { 
    color: white; 
    line-height: 60px; 
    padding-top: 5px; 
} 

#status-buttons a.active span { 
    background: #00BC8C; } 

.circle, #status-buttons a { 
    width: 56px; 
    height: 56px; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    -ms-border-radius: 50%; 
    border-radius: 50%; 
    background: #5dc5c5; 
    margin-right: 10px; 
    text-align:center; 

} 

嘗試的圓。就像在圖像中，我被卡在圓圈之間的線條上。嘗試添加邊框底部，它不會出現。不認爲div中的寬度可以用於行？有沒有什麼辦法可以解決這個問題，所以當點擊圓圈上的不同鏈接時，圓圈和它的線條會有活動的類別？

另一個問題：假設，鏈接帶我們到不同的形式不同的頁面，是否有可能使圓活躍？只有我能想到的方法是在每個頁面中使圓圈活動，因此，如果單擊任何鏈接頁面，例如單擊＃2，它將顯示1個和2個活動的圓圈。這可能是一個騙子。還有其他更好的方法嗎？

幫助讚賞。

Answer 1

我最近做了類似的事情。

.progressbar { 
 
     margin-top: 40px; 
 
     margin-bottom: 30px; 
 
     overflow: hidden; 
 
     counter-reset: step; 
 
    } 
 
    .progressbar li { 
 
     list-style-type: none; 
 
     color: #555555; 
 
     text-transform: uppercase; 
 
     text-align: center; 
 
     font-size: 9px; 
 
     width: 20%; 
 
     float: left; 
 
     position: relative; 
 
    } 
 
    .progressbar li:before { 
 
     content: counter(step); 
 
     counter-increment: step; 
 
     width: 20px; 
 
     line-height: 20px; 
 
     display: block; 
 
     font-size: 10px; 
 
     color: #333; 
 
     background: #bfbfbf; 
 
     border-radius: 20px; 
 
     margin: 0 auto 5px auto; 
 
    } 
 
    .progressbar li:after { 
 
     content: ''; 
 
     width: 100%; 
 
     height: 2px; 
 
     background: #bfbfbf; 
 
     position: absolute; 
 
     left: -50%; 
 
     top: 9px; 
 
     margin-left: 5px; 
 
     z-index: -1; 
 
    } 
 
    .progressbar li:first-child:after { 
 
     content: none; 
 
    } 
 
    .progressbar li.stepped { 
 
     color: #900028; 
 
     font-weight: bold; 
 
    } 
 
    .progressbar li.stepped:before, 
 
    .progressbar li.stepped:after{ 
 
     background: #900028; 
 
     color: white; 
 
    } 
 

 

<ul class="progressbar"> 
 
     <li class="stepped">Step 1</li> 
 
     <li class="stepped">Step 2</li> 
 
     <li class="stepped">Step 3</li> 
 
     <li>Step 4</li> 
 
     <li>Step 5</li> 
 
    </ul>

（來源：http://thecodeplayer.com/walkthrough/jquery-multi-step-form-with-progress-bar）