html - 如何获取标题中内联的元素？

Question

我正在创建一个自定义 header 。我不确定如何正确地在标题中完美地内联我的元素。例如，这些元素应该位于红色箭头所指的位置:

如何在标题中获取这些元素，将它们完美对齐，并将它们放在红色箭头指向的位置(上图)。

https://jsfiddle.net/af5caL8p/3/

body {
  margin: 0;
}

.header {
  height: 45px;
  width: 100%;
  background-color: royalblue;
  color: white;
  padding: 10px;
  margin-top: auto;
  margin-bottom: auto;
  line-height: 11px;
  display: inline-block;
}

button.signup {
  background-color: #2FA034;
  border-radius: 10px;
  color: white;
  font-size: 20px;
  font-weight: 300;
}


/* Material style */

button {
  border: none;
  cursor: pointer;
  color: black;
  width: 130px;
  padding: 10px;
  border-radius: 2px;
  font-size: 19px;
  background: royalblue;
  /* Ripple magic */
  position: relative;
  overflow: hidden;
}

<div class="header">
  <h1>Logo</h1>
  <a href="#">Link 1</a>
  <button class="signup">Signup</button>
  <button class="signup">Login</button>
</div>

Answer 1

使用 display: flex。我更新了您的 JS 示例:https://jsfiddle.net/af5caL8p/4