css - 如何 float 到 block 级元素的右侧并与 block 级元素齐平

Question

我想要一个看起来像这样的网页......

header {
  border-style: solid;
  border-top-width: 5px;
  background-color: red;
}

p {
  background-color: yellow;
}

header #btnLogIn {
  float: right;
  position: absolute;
  right: 170px;
  top: 40px;
}

header #btnGoogleLogIn {
  float: right;
  position: absolute;
  right: 30px;
  top: 40px;
}

<header>
  <h1>Site Title</h1>
  <button id="btnLogIn" type="button">Log in</button>
  <button id="btnGoogleLogIn" type="button">Log in with Google</button>
</header>
<hr/>
<p>Some text</p>

按钮需要与 h1 标题在同一水平面上，向右浮动，中间有一些合适的边距。按钮标题可以动态更改(通过语言选择)，因此任何具有硬编码 right 属性值的解决方案都是失败的。

如何让按钮以独立于按钮宽度的方式向右浮动，与 h1 元素位于同一行？解决方案需要是 css。

Answer 1

像这样使用 flexbox:

header {
  border-style: solid;
  border-top-width: 5px;
  background-color: red;
  display: flex;
  align-items: center;
}

p {
  background-color: yellow;
}

header button {
  margin: 0 10px;
}

header h1 {
  margin-right: auto;
}

<header>
  <h1>Site Title</h1>
  <button id="btnLogIn" type="button">Log in</button>
  <button id="btnGoogleLogIn" type="button">Log in with Google</button>
</header>
<hr>
<p>Some text</p>