cssプログレスバーのタブアライメント

Question

元は4つのプログレスバー/タブがありますが、もう1つ追加することにしましたが、5番目の 'タブのコードを追加しました。代わりに他の4と整列しません。代わりに、最初の 'タブ'の下になります。質問は、どのように5番目のタブを他の4つのタブと整列/インラインにすることができますか？

original preview

updated preview

ここにHTMLです：

 <div class="wizard"> 
     <div class="wizard-inner"> 
      <div class="connecting-line"></div> 
      <ul class="nav nav-tabs" role="tablist"> 

       <li role="presentation" class="active"> 
        <a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" style="pointer-events: none; cursor: default;"> 
         <span class="round-tab"> 
          <i class="glyphicon glyphicon-folder-open"></i> 
         </span> 
        </a> 
       </li> 

       <li role="presentation" class="disabled"> 
        <a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" style="pointer-events: none; cursor: default;"> 
         <span class="round-tab"> 
          <i class="glyphicon glyphicon-pencil"></i> 
         </span> 
        </a> 
       </li> 

       <li role="presentation" class="disabled"> 
        <a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" style="pointer-events: none; cursor: default;"> 
         <span class="round-tab"> 
          <i class="glyphicon glyphicon-picture"></i> 
         </span> 
        </a> 
       </li> 

       <li role="presentation" class="disabled"> 
        <a href="#step3" data-toggle="tab" aria-controls="step4" role="tab" style="pointer-events: none; cursor: default;"> 
         <span class="round-tab"> 
          <i class="glyphicon glyphicon-picture"></i> 
         </span> 
        </a> 
       </li> 

       <li role="presentation" class="disabled"> 
        <a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" style="pointer-events: none; cursor: default;"> 
         <span class="round-tab"> 
          <i class="glyphicon glyphicon-ok"></i> 
         </span> 
        </a> 
       </li> 
      </ul> 
     </div> 

    </div> 

CSS：

.wizard { 
    margin: 20px auto; 
    background: #fff; 
    width: 90%; 
    margin-top: -20px; 
    margin-left: 85px; 
} 

    .wizard .nav-tabs { 
     position: relative; 
     margin: 4px auto; 
     margin-bottom: 0; 
     border-bottom-color: #e0e0e0; 
    } 

    .wizard > div.wizard-inner { 
     position: relative; 
     margin-right:90px; 
    } 

.connecting-line { 
    height: 2px; 
    background: #e0e0e0; 
    position: absolute; 
    width: 100%; 
    margin: 0 auto; 
    left: 0; 
    right: 0; 
    top: 50%; 
    z-index: 1; 
} 

.wizard .nav-tabs > li.active > a, .wizard .nav-tabs > li.active > a:hover, .wizard .nav-tabs > li.active > a:focus { 
    color: #FFA53E; 
    cursor: default; 
    border: 0; 
    border-bottom-color: transparent; 
} 

span.round-tab { 
    width: 70px; 
    height: 70px; 
    line-height: 70px; 
    display: inline-block; 
    border-radius: 100px; 
    background: #fff; 
    border: 2px solid #e0e0e0; 
    z-index: 2; 
    position: absolute; 
    left: 0; 
    text-align: center; 
    font-size: 25px; 
} 
span.round-tab i{ 
    color:#FFA53E; 
} 
.wizard li.active span.round-tab { 
    background: #fff; 
    border: 2px solid #F86D18; 

} 
.wizard li.active span.round-tab i{ 
    color: #F86D18; 
} 

span.round-tab:hover { 
    color: #333; 
    border: 2px solid #333; 
} 

.wizard .nav-tabs > li { 
    width: 25%; 
} 

.wizard li:after { 
    content: " "; 
    position: absolute; 
    left: 46%; 
    opacity: 0; 
    margin: 0 auto; 
    bottom: 0px; 
    border: 5px solid transparent; 
    border-bottom-color: #F86D18; 
    transition: 0.1s ease-in-out; 
} 

.wizard li.active:after { 
    content: " "; 
    position: absolute; 
    left: 46%; 
    opacity: 1; 
    margin: 0 auto; 
    margin-right:-10px; 
    bottom: 0px; 
    border: 10px solid transparent; 
    border-bottom-color: #F86D18; 
} 

.wizard .nav-tabs > li a { 
    width: 70px; 
    height: 70px; 
    margin: 20px auto; 
    border-radius: 100%; 
    padding: 0; 
} 

    .wizard .nav-tabs > li a:hover { 
     background: transparent; 
    } 

.wizard .tab-pane { 
    position: relative; 
    padding-top: 50px; 
} 

.wizard h3 { 
    margin-top: 0; 
} 

Answer 1

あなたli要素は幅の1/4に設定され、あなたがしようとしています5要素を入れる。 試行：

.wizard .nav-tabs > li { 
    width: 20%; 
}