如何在标题中内联元素？

Question

我正在努力创建自定义标头。我不确定如何在我的标题中正确完美地内联我的元素。例如，这些元素应该是红色箭头指向的位置：

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

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

Answer 2

display: inline-block显示只是使具有块/内联默认属性的元素使用额外的属性，例如<span>默认为内联元素，并且只能使用填充而不是边距。

使其显示内联块允许它使用适用于块元素的属性，例如带有边距的段落。

body {
  margin: 0;
}

.header {
  height: 45px;
  width: 100%;
  background-color: royalblue;
  color: white;
  padding: 10px;
  margin-top: auto;
  margin-bottom: auto;
  line-height: 11px;
  /*use flex instead of display: inline-block; explanation is above*/
  display: flex;
}

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>