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

您可以在需要时重置vertical-align元素上的inline-block （defaut is baseline）值。这里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>

要a覆盖div，您也可以使用高度或最终行高：

#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>

Answer 2

我将其更改为此代码。我所做的是将display更改为block（header-a和header-h），而不是inline-block。然后我将两个元素都悬空了。运行代码段以查看其实际效果

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以让菜单栏中的内容调整其高度，而不是将菜单栏的高度设置为70px。这样您就可以垂直居中“主页”按钮。 JSFiddle

HTML

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

CSS

#header {
  position: fixed;
  background-color: #1564B3;
  color: #fff;
  width: 100%;
  top: 0%;
  left: 0%;
}
#header-a {
  background-color: #555555;
  display:inline-block;
  padding:30px 50px 30px 50px;
  width:10%;
  text-align:center;
}

#header-h {
  display:inline-block;
  width:30%;
  text-align:center;
}

您是否看到#header-a的填充如何不仅垂直居中主页文本，还包括#header大小如何适合它。

我在制作按钮时遇到问题

3 个答案: