如何使用HTML和CSS实现页面顶部多个元素互相对齐排列？

改造方案 #

你当前代码的核心问题是导航元素结构分散、浮动布局容易出现对齐错位，以下是完整可直接复用的改造代码，已经实现你需要的布局效果和搜索交互逻辑：

调整后HTML代码

<header class="site-header">
  <img class="logo-img" src="Assets/Logo Light.png" width="520" height="240" alt="站点logo">
  <!-- 左侧导航组：下拉框+4个导航按钮 -->
  <div class="nav-group">
    <div class="dropdown">
      <button class="dropbtn">About Us</button>
      <div class="dropdown-content">
        <a href="">Awards</a>
        <a href="Employees.html">Employees</a>
        <a href="">FAQ</a>
        <a href="#">Overview</a>
      </div>
    </div>
    <nav>
      <ul>
        <li><a href="#">Nav 1</a></li>
        <li><a href="#">Nav 2</a></li>
        <li><a href="#">Nav 3</a></li>
        <li><a href="#">Nav 4</a></li>
      </ul>
    </nav>
  </div>
  <!-- 右侧功能区：搜索框+联系我们按钮 -->
  <div class="right-group">
    <div class="searchbar">
      <form id="form" role="search">
        <input type="search" id="query" name="q" placeholder="Search..." aria-label="Search through site content">
        <button>
          <svg viewBox="0 0 1024 1024"><path class="path1" d="M848.471 928l-263.059-263.059c-48.941 36.706-110.118 55.059-177.412 55.059-171.294 0-312-140.706-312-312s140.706-312 312-312c171.294 0 312 140.706 312 312 0 67.294-24.471 128.471-55.059 177.412l263.059 263.059-79.529 79.529zM189.623 408.078c0 121.364 97.091 218.455 218.455 218.455s218.455-97.091 218.455-218.455c0-121.364-103.159-218.455-218.455-218.455-121.364 0-218.455 97.091-218.455 218.455z"></path></svg>
        </button>
      </form>
    </div>
    <button class="contact-btn">联系我们</button>
  </div>
</header>

调整后CSS代码

@charset "utf-8";
body {
  margin: 0;
  padding: 0;
  font-size: 15px;
}

/* 头部容器 */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: white;
  gap: 30px;
}
/* 搜索激活状态隐藏导航 */
.site-header.search-active .nav-group {
  display: none;
}

.logo-img {
  margin: 10px 0;
}

.nav-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 下拉框样式 */
.dropbtn {
  background-color: #D11C1F;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
.dropdown {
  position: relative;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 999;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {
  background-color: #ddd;
}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown:hover .dropbtn {
  background-color: #5E5A5A;
}

/* 普通导航样式 */
nav ul {
  margin: 0;
  padding: 0;
  display: flex;
  gap: 10px;
  list-style: none;
}
nav>ul>li>a {
  color: #aaa;
  display: block;
  line-height: 2em;
  padding: 16px 1em;
  text-decoration: none;
  font-size: 16px;
}
nav>ul>li>a:hover {
  background-color: #f5f5f5;
}

.right-group {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* 搜索框样式 */
form {
  background-color: #4654e1;
  width: 300px;
  height: 44px;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
input {
  all: unset;
  font: 16px system-ui;
  color: #fff;
  height: 100%;
  width: 100%;
  padding: 6px 10px;
}
::placeholder {
  color: #fff;
  opacity: 0.7;
}
form button {
  all: unset;
  cursor: pointer;
  width: 44px;
  height: 44px;
}
svg {
  color: #fff;
  fill: currentColor;
  width: 24px;
  height: 24px;
  padding: 10px;
}

/* 联系我们按钮 */
.contact-btn {
  padding: 10px 20px;
  background-color: #D11C1F;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

交互JS代码

const searchInput = document.getElementById('query')
const header = document.querySelector('.site-header')

searchInput.addEventListener('input', function() {
  this.value.trim().length > 0 ? header.classList.add('search-active') : header.classList.remove('search-active')
})

实现效果 #

• logo固定在左侧，后续紧跟下拉菜单和4个导航按钮，所有按钮高度一致视觉对齐
• 搜索框和联系我们按钮固定在右侧，整体导航栏所有元素垂直居中
• 搜索框输入内容时自动隐藏中间的导航组，仅保留logo、搜索框和联系我们按钮，清空搜索内容后自动恢复导航显示

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