Html 你把测量搞砸了？

我有一个em单位的问题，我已经设置了导航列表宽度为6.250em，相当于100px，工作正常。当我将每个li的宽度更改为6.250em时，它不会延伸到与navlist相同的宽度。为什么会发生这种情况？我该如何解决

CSS代码：

.navlist {
  width: 100px;
  height: auto;
  float: left;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background-color: #000; }
 .navlist li {
  font-weight: bold;
  font-family: sans-serif;
  font-size: 14px;
  text-align: center;
  text-transform: uppercase;
  text-shadow:0px 1px #14161A; }
i {
  font-size: 26px;
  padding-bottom: 6px;}
a.nav-buttons {
  width: 6.250em;
  height: 60px;
  display: block;
  display: table-cell;
  vertical-align: middle;
  color: #CCC;
  text-decoration: none;
  background-color: #666;
  border-top: 1px solid #2E3139;
  border-bottom: 1px solid #14161A; }
 a.nav-buttons:hover, a.nav-buttons:focus {
  color: #fff;}

HTML代码：

<ul class="navlist">
    <li><a href="#" class="nav-buttons"><i class="fa fa-home"></i> Home</a></li>
    <li><a href="#" class="nav-buttons"><i class="fa fa-info-circle"></i> About</a></li>
</ul>

---

jsidle Here:

ems是相对于其父项的，因此li是相对于nav的，而不是nav的父项。您可以重置li上的字体大小。假设它与nav上的不同，也会将li上em的值更改为1em=14px

如果navlist的字体大小从未更改，并且等于正文的默认大小16px，那么这就是您的问题，因为navlist上的1em将等于16px，而li上的1em将等于14px