li宽度未使用父级ul标记进行修复

Question

我查看了一些我开发过的网页。 li宽度存在一些css问题。

以下是导航菜单的代码：

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