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

li 宽度不固定父 ul 标签

li width not fixing with parent ul tag

html

css

list

vertical-alignment

box-sizing