如何创建类似Stack Overflow带搜索表单与图标的navbar导航栏

你当前的代码缺少输入组的整体包裹、导航栏布局约束，也没有匹配Stack Overflow的设计风格，以下是可直接复用的实现：

完整实现代码 #

1. HTML结构 #

需要提前确保你已经引入了FontAwesome图标库和基础样式重置：

<!-- 导航栏整体容器 -->
<nav class="so-navbar">
  <!-- 左侧区域：可自行添加logo、主导航链接 -->
  <div class="so-nav-left"></div>
  
  <!-- 搜索表单区域 -->
  <form class="so-search-form" action="" method="get">
    <div class="so-search-group">
      <i class="fa fa-search so-search-icon"></i>
      <input type="text" name="search" class="so-search-input" placeholder="Search...">
      <!-- 可选：搜索筛选按钮，匹配Stack Overflow原生功能 -->
      <button class="so-search-filter" type="button"><i class="fa fa-chevron-down"></i></button>
    </div>
  </form>
  
  <!-- 右侧区域：可自行添加通知入口、用户头像、登录按钮等 -->
  <div class="so-nav-right"></div>
</nav>

2. CSS样式 #

/* 导航栏基础样式 */
.so-navbar {
  width: 100%;
  height: 50px;
  background: #f8f9f9;
  border-bottom: 1px solid #e3e6e8;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 16px;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* 搜索表单样式 */
.so-search-form {
  flex: 1;
  max-width: 650px;
  margin: 0 auto;
}
.so-search-group {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}
.so-search-icon {
  position: absolute;
  left: 10px;
  color: #6a737c;
  font-size: 14px;
}
.so-search-input {
  width: 100%;
  padding: 8px 32px 8px 32px;
  border: 1px solid #babfc4;
  border-radius: 3px;
  font-size: 13px;
  line-height: 1.15;
}
.so-search-input:focus {
  outline: none;
  border-color: #59a4de;
  box-shadow: 0 0 0 4px rgba(89, 164, 222, 0.15);
}
.so-search-filter {
  position: absolute;
  right: 8px;
  background: transparent;
  border: none;
  color: #6a737c;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
}
.so-search-filter:hover {
  background: #e3e6e8;
}

功能说明 #

• 搜索图标内置在输入框内部，不需要单独设置提交按钮，完全匹配Stack Overflow的原生交互
• 导航栏默认做了吸顶处理，滚动页面时会固定在视口顶部
• 输入框聚焦的高亮样式、配色完全和Stack Overflow官方设计一致
• 可根据自己的业务需求调整搜索框最大宽度、导航栏左右区域的内容

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