顶部导航栏响应式优化：调整Input宽度及添加登录入口

我来帮你搞定这个导航栏的布局问题～你现在遇到的小屏幕下输入框过小的问题，主要是因为嵌套的百分比宽度在窄屏幕上被逐级压缩，再加上没有设置最小宽度限制，同时登录按钮的布局方式也不符合flex布局的最佳实践。下面是调整后的完整代码和关键说明：

修改后的完整代码 #

HTML部分 #

<div class="top_nav_menu">
  <div class="header">
    <img src="http://i.imgur.com/EFkps0m.png" alt="Logo">
    <form>
      <input type="text" placeholder="搜索...">
    </form>
    <div class="sign-in">Sign-in</div>
  </div>
</div>

CSS部分 #

.top_nav_menu {
  border-bottom: 1px solid #e3e3e3;
  box-shadow: 0 0 8px 0 #eeeeee;
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #fafafa;
  padding: 15px;
  z-index: 2;
  /* 内边距不增加总宽度，避免布局溢出 */
  box-sizing: border-box;
}

.header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 25px; /* 用gap统一控制元素间距，比margin更灵活 */
  flex-wrap: wrap; /* 小屏幕下自动换行，保证内容不拥挤 */
}

.header > form {
  /* 让表单填充logo和登录按钮之间的剩余空间 */
  flex: 1;
  min-width: 200px; /* 给表单设置最小宽度，避免输入框被挤没 */
}

.header > form > input {
  width: 40%; /* 满足你要求的40%宽度 */
  min-width: 180px; /* 设置最小宽度，小屏幕下不会缩得难以使用 */
  padding: 8px; /* 增加内边距提升交互体验 */
  box-sizing: border-box;
}

.header .sign-in {
  /* flex布局下用margin-left:auto实现自动右对齐，比float更可靠 */
  margin-left: auto;
  padding: 8px 16px;
  cursor: pointer;
}

关键调整说明 #

• 登录按钮布局修正：把拼写错误的floar-right改成margin-left: auto，这是flex容器中实现元素右对齐的标准方式，不会破坏响应式效果，比float更适配flex布局。
• 输入框最小宽度限制：给input加上min-width: 180px，确保窄屏幕下输入框不会缩小到难以操作；同时给form设置min-width: 200px，保证输入框有合理的父容器宽度。
• flex布局优化：用gap:25px替代原有的margin-left:25px，统一控制元素间的间距；给form加上flex:1，让它自动填充logo和登录按钮之间的剩余空间，确保输入框的40%宽度是基于合理的父容器宽度计算的。
• 盒模型修正：给.top_nav_menu和input加上box-sizing: border-box，避免padding增加元素总宽度导致布局溢出屏幕。

这样调整后，全屏状态下输入框会保持40%宽度并紧邻logo，登录按钮固定在右上角；小屏幕下元素会自动换行，输入框也不会变得极小，完美保留响应式效果～

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