html - 我在制作按钮时遇到问题

Question

我正在通过制作一个网站来练习我的 HTML，我正在制作一个带有按钮的标题。我试图使按钮达到标题的整个高度，但由于某种原因它超出了标题，并且没有到达顶部。

#header {
  background-color: #1564B3;
  color: #fff;
  height: 70px;
  position: fixed;
  width: 100%;
  top: 0%;
  left: 0%;
}
#header-a {
  width: 100px;
  background-color: #555555;
  display: inline-block;
  text-align: center;
  margin-top: 0px;
  height: 100%;
}
#header-h {
  display: inline-block;
  margin-top: 20px;
}

<div id="header">
  <h2 id="header-h">Header text</h2>
  <div id="header-a">
    <a href="index.html">Home</a>
  </div>
</div>

Answer 1

您可以在需要时重置 inline-block 元素上的 vertical-align(默认为基线) 值。这里 vertical-align:top; 会很好:

#header {
  background-color: #1564B3;
  color: #fff;
  height: 70px;
  position: fixed;
  width: 100%;
  top: 0%;
  left: 0%;
}
#header-a {
  width: 100px;
  background-color: #555555;
  display: inline-block;
  text-align: center;
  margin-top: 0px;
  height: 100%;
  vertical-align:top;
}
#header-h {
  display: inline-block;
  margin-top: 20px;
}

<div id="header">
  <h2 id="header-h">Header text</h2>
  <div id="header-a">
    <a href="index.html">Home</a>
  </div>
</div>

对于覆盖 div 的 a，您还可以使用高度或最终使用行高:

#header {
  background-color: #1564B3;
  color: #fff;
  height: 70px;
  position: fixed;
  width: 100%;
  top: 0%;
  left: 0%;
}
#header-a {
  width: 100px;
  background-color: #555555;
  display: inline-block;
  text-align: center;
  margin-top: 0px;
  height: 100%;
  vertical-align:top;
}
#header-a a {
  display:block;
  line-height:70px;/* will size it up to 70px height for each line */
  }
#header-h {
  display: inline-block;
  margin-top: 20px;
}

<div id="header">
  <h2 id="header-h">Header text</h2>
  <div id="header-a">
    <a href="index.html">Home</a>
  </div>
</div>