Li Breite nicht mit Eltern ul Tag

Question

Ich habe einige Webseiten, die ich entwickelt habe überprüft. Es gibt einige CSS-Probleme für li Breite. Hier

ist der Code für das Navigationsmenü:

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>

Aber ich bekomme folgendes Ergebnis:

Die Breite des li Tag 16 %. Und die Anzahl der li ist 6. Warum ist die Gesamtbreite von li Tags größer als die ul Breite?

Answer 1

Set box-sizing: border-box weltweit als schnelle Lösung - siehe Demo unter:

*{ 
 
    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

Mit dieser Arbeit sollte:

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 (: 
    }