Header内logo、搜索框与导航项无法同行显示问题求助

问题原因 #

1. .header__container未设置弹性布局，内部的header__container-logo、header__container-search、header__container-nav都是默认块级元素（div），会自动独占一行。
2. logo链接.header__container a设置了width:100%，直接占满容器宽度，把后续元素挤到下一行。
3. .header__container div加了左右内边距padding:0 300px，进一步撑开子元素宽度，加剧布局错乱。

修复步骤 #

1. 给.header__container添加弹性布局，让内部元素横向排列并垂直居中：

.header__container {
  /* 保留原有样式 */
  display: flex;
  align-items: center;
  justify-content: space-between; /* 让元素分布在容器两端和中间 */
  padding: 0 300px; /* 把内边距移到容器本身 */
}

2. 调整logo宽度，取消100%占满：

.header__container a {
  /* 保留原有样式 */
  width: 180px; /* 替换width:100%，可根据需求调整 */
}

3. 移除子div的内边距，避免宽度溢出：

.header__container div {
  padding: 0; /* 替换padding:0 300px */
  margin: 4px 0;
}

4. 优化搜索框布局（可选）：

.header__container-search {
  flex: 1; /* 让搜索框占满中间剩余空间 */
  margin: 0 20px; /* 增加左右间距 */
}
.header__container input[type="text"] {
  width: 100%; /* 搜索框占满父容器 */
}

修改后的完整代码 #

CSS

.header {
  display: block;
  flex-direction: column;
  font-family: "Roboto Condensed", "Helvetica Neue", "HelveticaNeue", Arial,
    sans-serif;
  font-size: 14px;
}

.header__container a {
  background: url(https://gamefaqs.gamespot.com/a/images/site/logo_v13.png)
    no-repeat left center;
  display: block;
  height: 50px;
  overflow: hidden;
  margin: 0 0;
  text-indent: 110%;
  width: 180px;
  background-size: contain;
}

.header__console div {
  padding: 0 300px;
  margin: 4px 0;
}

.header__console {
  border: 1px solid black;
  background-color: #28398a;
  color: #fff;
}

.header span {
  padding: 0 5px;
}

.header__container {
  border: 1px solid black;
  background-color: #3951c6;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 300px;
}

.header__container div {
  padding: 0;
  margin: 4px 0;
}

.header__container-item {
  font-size: 15px;
}

.header__container-search {
  flex: 1;
  margin: 0 20px;
}

.header__container input[type="text"] {
  width: 100%;
  padding: 6px;
  margin-top: 8px;
  font-size: 16px;
  border: none;
  border-radius: 300px;
  background-color: #f5f5f5;
}

.header__footer {
  border: 1px solid #28398a;
}

HTML

<div class="header">
  <div class="header__console">
    <div>
      <span>PC</span>
      <span>PS4</span>
      <span>PS5</span>
      <span>Switch</span>
      <span>Xbox One</span>
      <span>Xbox Series</span>
      <span>More Systems ▼</span>
    </div>
  </div>
  <div class="header__container">
    <div class="header__container-logo">
      <a href="/">GameFAQs</a>
    </div>
    <div class="header__container-search">
      <input type="text" placeholder="Search Game Titles" name="search" />
    </div>
    <div class="header__container-nav">
      <span class="header__container-item">BOARDS</span>
      <span class="header__container-item">NEWS</span>
      <span class="header__container-item">Q&A</span>
    </div>
  </div>
  <div class="header__footer"></div>
</div>

内容的提问来源于stack exchange，提问作者Dagger