html - 链接垂直对齐问题

Question

这是我的问题

header {
  width: 100%;
  height: 81px;
  background: #669999;
  line-height: 81px;
}

header nav {
  float: right;
  margin-right: 15%;
  background: green;
}

header nav ul {
  background: yellow;
  width: 650px;
}

header nav li {
  display: inline-block;
  margin-left: 20px;
  width: 180px;
  height: 36px;
  background: #006666;
  margin-top: 20px;
  margin: auto;
}

header nav li a {
  background: red;
  margin: auto;
}

<header>
  <nav>
    <ul>
      <li><a href="">About</a></li>
      <li><a href="">Works</a></li>
      <li><a href="">Contact</a></li>
    </ul>
  </nav>
</header>

我想知道为什么 <a>链接未对齐内部 <li>名单？

<a>链接与标题垂直对齐，因此非常完美，但是 <li>列表如上。

Answer 1

实际上你正面临着一个继承的问题。在标题上定义 line-height 时，它会被 li 和 a 继承。 li 是一个 inline-block 元素，它的高度由您添加的固定高度定义(或者默认情况下其内容的高度)

a 元素是一个内联元素，它的高度由它的 line-height 定义(继承自 li)，逻辑上你会有一个溢出，因为它会大于 li (81px > 36px) 的高度。如果您从 li 中移除固定高度，它的高度将等于 81px，这是其内容 a 的高度。

为了避免这种情况，您只需通过将 li 的 line-height 设置为 initial 来移除继承( a 也将继承它)并删除固定高度:

* {
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  height: 81px;
  background: #669999;
  line-height: 81px;
}

header nav {
  background: green;
}

header nav ul {
  background: yellow;
}

header nav li {
  display: inline-block;
  margin-left: 20px;
  width: 180px;
  line-height: initial;
  background: #006666;
  margin-top: 20px;
  margin: auto;
}

header nav li a {
  background: red;
  margin: auto;
}

<header>
  <nav>
    <ul>
      <li><a href="">About</a></li>
      <li><a href="">Works</a></li>
      <li><a href="">Contact</a></li>
    </ul>
  </nav>
</header>

如果您想为 li 定义固定高度，只需指定其行高等于其固定高度即可:

* {
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  height: 81px;
  background: #669999;
  line-height: 81px;
}

header nav {
  background: green;
}

header nav ul {
  background: yellow;
}

header nav li {
  display: inline-block;
  margin-left: 20px;
  width: 180px;
  height:36px;
  line-height: 36px;
  background: #006666;
  margin-top: 20px;
  margin: auto;
}

header nav li a {
  background: red;
  margin: auto;
}

<header>
  <nav>
    <ul>
      <li><a href="">About</a></li>
      <li><a href="">Works</a></li>
      <li><a href="">Contact</a></li>
    </ul>
  </nav>
</header>