li width not fixing with parent ul tag

Question

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:

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?

padding, margin ... ? You have 6 elements with 30px padding atleast, 180px must be more than 4% left ) — Georgy, Dec 22 '16 at 17:00
You may have to set your box-sizing https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing — Benneb10, Dec 22 '16 at 17:01

score 4 · Accepted Answer · answered Dec 22 '16 at 17:06

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>

score 2 · Answer 2 · answered Dec 22 '16 at 17:10

With this should work:

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

li width not fixing with parent ul tag

2 Answers2