html - 如何使用 CSS 内联元素

Question

我正在尝试在我的网站顶部制作菜单栏。 它应该是这样的:

红色方 block 是我的按钮。

我的问题是我的标题和我的按钮不在同一行。所以我尝试使用一个表，但它们都向左对齐。 之后我使用 float: right; 作为我的按钮。 它现在右对齐，但在下一行。

如何修复它，使我的按钮和标题在同一行并像我的图片一样对齐。

HTML:

<div id="topbar">
   <h1>Fahrplan</h1>
   <button type="button" id="settings"></button>
</div>

CSS:

h1 {
  height: 44px;
  margin: 0;
  color:#FFFFFF;
  text-align: center;
  font-family: Helvetica, sans-serif;
  font-size: 16px; 
  line-height: 44px;
}
#topbar button {
  height: 20px;
  width: 20px;
  float: right;
}

Answer 1

对于这种情况，您可以考虑使用position。

#topbar {
  position: relative;
}

h1 {
  margin: 0;
  color:#FFFFFF;
  text-align: center;
  font-family: Helvetica, sans-serif;
  font-size: 16px; 
  line-height: 44px;
  background: #99f;
}
#topbar button {
  height: 20px;
  width: 20px;
  position: absolute;
  top: 50%;
  right: 5px;
  margin-top: -10px;
}

<div id="topbar">
  <h1>Fahrplan</h1>
  <button type="button" id="settings"></button>
</div>

在这里，我为 #topbar 和按钮都指定了 position。 #topbar 有一个相对 位置，按钮有一个绝对 位置:

#topbar {
  position: relative;
}
button {
  position: absolute;
  top: 50%;
  right: 5px;
  margin-top: -10px;
}

而且我还通过使用一半高度的负边距将按钮调整为垂直居中。希望这会有所帮助。