如何将搜索框和导航栏放在同一行？

<div class="header-container">
  <input type="text" class="search-box" placeholder="Search...">
  <nav class="navigation">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</div>

.header-container {
  display: flex;
  align-items: center; /* 水平居中对齐 */
  height: 50px;
  background-color: #f5f5f5;
  /* 其他样式属性设置 */
}

.search-box {
  display: inline-block;
  width: 200px;
  height: 30px;
  margin-right: 10px;
  /* 其他样式属性设置 */
}

.navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigation ul li {
  display: inline-block;
  margin-right: 10px;
}

.navigation ul li a {
  text-decoration: none;
  color: #333;
}

/* 其他样式属性设置 */