У меня есть список перекошенного меню, как я могу правильно его выровнять?

Question

Хорошо, это меню начальной загрузки с немного настроенным, которое имеет перекошенное меню, которое вы заметили, что, когда я проверяю элемент, первое меню слева переполняется по ширине контейнера, а последнее меню не встречается на конце из контейнера, что является лучшим решением для выравнивания его с обеих сторон? Благодаря

.nav-tabs { 
 
    border: 0; 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
} 
 

 
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { 
 
    background: transparent; 
 
    border-radius: 0; 
 
    font-family: 'Klavika Bd'; 
 
    text-decoration: none; 
 
    font-size: 28px; 
 
    border: 0; 
 

 

 
} 
 

 
.nav-tabs>li>a { 
 
    margin: 0; 
 
    border-radius: 0; 
 
    font-family: 'Klavika Bd'; 
 
    text-decoration: none; 
 
    font-size: 28px; 
 
    color: #fff; 
 
    border:0; 
 
    text-align: center; 
 
    display: inline-block; 
 
    width: 100%; 
 
    height: 80px; 
 
    position: relative; 
 
    line-height: 58px; 
 

 
} 
 

 

 
.nav-tabs > li { 
 
    width: 32.1%; 
 
    margin-right: 1.2%; 
 
} 
 

 

 
.nav-tabs > li > a:before { 
 
    content: ''; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #ff4600; 
 
    transform: skew(-10deg); 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: -1; 
 
} 
 

 
.nav-tabs > li > a:hover:before { 
 
    background: #ff6c34; 
 
} 
 

 
.nav-tabs > li.active > a:before { 
 
    background: #d1d2d4; 
 
} 
 

 

 
.nav>li>a:focus, .nav>li>a:hover { 
 
    text-decoration: none; 
 
    background-color: transparent; 
 
} 
 

 
.nav-tabs>li { 
 
    float: left; 
 
    margin-bottom: -1px; 
 
    list-style-type:none; 
 
}

<ul class="nav nav-tabs" role="tablist"> 
 
      <li role="presentation" class="active"><a href="#top10" aria-controls="top10" role="tab" data-toggle="tab">1. PICK YOUR TOP 10</a></li> 
 
      <li role="presentation"><a href="#review" aria-controls="profile" role="tab" data-toggle="tab">2. REVIEW</a></li> 
 
      <li role="presentation"><a href="#submit" aria-controls="messages" role="tab" data-toggle="tab">3. SUBMIT & SHARE</a></li> 
 
      </ul>

Answer 1

Лучше всего было бы добавить немного margin-left к .nav-tabs>li:

.nav-tabs>li { 
    margin-left: 5px; 
} 

Сколько маржи вы добавите зависит от того, сколько смещение тебе нужно.

Надеется, что это помогает :)

Answer 2

Главный виновник того, почему левая сторона проложенная отличаются, то право вашего li правила:

.nav-tabs > li { 
    width: 32.1%; 
    margin-right: 1.2%; 
} 

С этим правилом, первый не имеет запаса по левая и все остальные имеют границу с обеих сторон. Самый простой способ, чтобы получить это соответствие равномерно, чтобы изменить его на:

.nav-tabs > li { 
    width: 32.1%; 
    margin-right: .6%; 
    margin-left: .6%; 
} 

В качестве альтернативы можно применить правило конкретно либо первый или последний li с помощью li:first-child или li:last-child для регулировки по мере необходимости.