htmlcsslistvertical-alignmentbox-sizing

li width not fixing with parent ul tag

I've checked some web pages I've developed. There are some css problems for li width.

Here is the code for the navigation menu: 

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>

But I get the following result:

enter image description here

The width of the li tag is 16%. And the number of li is 6. Why is the total width of li tags larger than the ul width?

Solution

  • Set box-sizing: border-box globally as a quick fix - see demo below:

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