css progress bar tab alignment

Question

Первоначально у меня есть индикатор выполнения/вкладка 4, но я решил добавить еще 1, но когда я добавил код для пятой вкладки. он не будет согласован с другими 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%; 
}