无法将h1和ul行

Question

如何使<h1>元素和<ul>元素内联？

---

到目前为止，我已经尝试过：

body {
    margin:0;
}
header{
    background:#999;
    color:white;
    padding:15px 15px 0px 15px;
}
header h1{
    margin:0;
    display: inline;
}
nav ul{
    margin:0;
    display: inline;
}
nav ul li{
    background:black;
    color:white;
    display: inline-block;
    list-style-type: none;
    padding:5px 15px;
}
nav ul li a {
    color:white;
}

<header>
  <h1>My Page</h1>
  <nav>
    <ul>
      <li><a href="#">List Item</a></li>
      <li><a href="#">List Item</a></li>
      <li><a href="#">List Item</a></li>
      <li><a href="#">List Item</a></li>
    </ul>
  </nav>
</header>

Answer 1

只需使用<header>将父元素display:flex;更改为弹性框，如下所示：

header{
  display: flex;
  /* other css properties below */
}

---

检查并运行以下代码段，以获取上述flexbox方法的实际示例：

/* CSS */

body {
  margin:0;
}
header{
  background:#999;
  color:white;
  padding:15px 15px 0px 15px;
  display: flex;
}
header h1{
  margin:0;
}
nav ul{
  margin:0;
}
nav ul li{
  background:black;
  color:white;
  display: inline-block;
  list-style-type: none;
  padding:5px 15px;
}
nav ul li a {
  color:white;
}

<!-- HTML -->

<header>
  <h1>My Page</h1>
  <nav>
    <ul>
      <li><a href="#">List Item</a></li>
      <li><a href="#">List Item</a></li>
      <li><a href="#">List Item</a></li>
      <li><a href="#">List Item</a></li>
    </ul>
  </nav>
</header>