li ширина не фиксируется с родительским знаком ul

Question

Я проверил некоторые веб-страницы, которые я разработал. Есть некоторые проблемы css для ширины li.

Вот код для навигации по меню:

ul.tabs { 
 
    padding: 0px; 
 
    list-style: none; 
 
    background: transparent; 
 
    border-bottom: 3px solid #ff6600; 
 
    -moz-border-radius: 0px; 
 
    -webkit-border-radius: 0px; 
 
    border-radius: 0px; 
 
    text-align: center; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 
ul.tabs li { 
 
    background-color: #ff6600; 
 
    border-top-left-radius: 5px; 
 
    border-top-right-radius: 5px; 
 
    border: none; 
 
    color: #f5ede3; 
 
    display: inline-block; 
 
    padding: 5px 15px; 
 
    cursor: pointer; 
 
    margin-left: 0px; 
 
    width: 16%; 
 
    text-align: center; 
 
} 
 
ul.tabs li.current { 
 
    background: #f5ede3; 
 
    color: #ff6600; 
 
}

<ul class="tabs"> 
 
    <li data-tab="tabs-1" class="current">Amenities</li> 
 
    <li data-tab="tabs-5">Attractions</li> 
 
    <li data-tab="tabs-2">Rates</li> 
 
    <li data-tab="tabs-6">Calendar</li> 
 
    <li data-tab="tabs-4">Reviews</li> 
 
    <li data-tab="tabs-3">Inquire</li> 
 
</ul>

Но я получаю следующий результат:

Ширина li тега 16 %. И число li равно 6. Почему общая ширина тегов li превышает ширину ul?

Answer 1

Установить box-sizing: border-box глобально как быстро исправить - см демонстрационная ниже:

*{ 
 
    box-sizing: border-box; 
 
} 
 
ul.tabs { 
 
    padding: 0px; 
 
    list-style: none; 
 
    background: transparent; 
 
    border-bottom: 3px solid #ff6600; 
 
    -moz-border-radius: 0px; 
 
    -webkit-border-radius: 0px; 
 
    border-radius: 0px; 
 
    text-align: center; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 
ul.tabs li { 
 
    background-color: #ff6600; 
 
    border-top-left-radius: 5px; 
 
    border-top-right-radius: 5px; 
 
    border: none; 
 
    color: #f5ede3; 
 
    display: inline-block; 
 
    padding: 5px 15px; 
 
    cursor: pointer; 
 
    margin-left: 0px; 
 
    width: 16%; 
 
    text-align: center; 
 
} 
 
ul.tabs li.current { 
 
    background: #f5ede3; 
 
    color: #ff6600; 
 
}

<ul class="tabs"> 
 
    <li data-tab="tabs-1" class="current">Amenities</li> 
 
    <li data-tab="tabs-5">Attractions</li> 
 
    <li data-tab="tabs-2">Rates</li> 
 
    <li data-tab="tabs-6">Calendar</li> 
 
    <li data-tab="tabs-4">Reviews</li> 
 
    <li data-tab="tabs-3">Inquire</li> 
 
</ul>

Answer 2

С этим должно работать:

ul.tabs li{ 
     background-color: #ff6600; 
     border-top-left-radius:5px; 
     border-top-right-radius:5px; 
     border:none; 
     color: #f5ede3; 
     display: inline-block; 
     padding: 5px 15px; 
     cursor: pointer; 
     margin-left:0px; 
     width:16%; 
     text-align:center; 
     box-sizing: border-box;// Try adding this line (: 
    }