如何让搜索栏输入框占满父div剩余宽度（排除按钮）

嘿，这个问题很常见！你之前用float:right加输入框width:100%没生效，是因为浮动元素会脱离正常文档流，输入框的100%宽度是基于父容器的完整宽度，加上按钮的宽度就会溢出容器。下面给你两种纯CSS的解决方案，都不用JavaScript：

方案一：Flexbox（推荐，灵活适配） #

Flexbox是现代布局的首选，能轻松实现“剩余空间填充”的需求，而且不用硬算宽度：

<div style="margin: 8px; margin-bottom: 32px; padding: 1px; background-color: #888; display: flex; align-items: center; gap: 0;">
  <input type="text" name="search" placeholder="Search..." style="padding: 14px; font-size: 16px; flex: 1; border: none; outline: none; background-color: transparent;">
  <button type="submit" style="padding: 16px; border: none; background-color: transparent; cursor: pointer;">
    <i class='fa fa-search'></i>
  </button>
</div>

关键说明： #

• 给父容器添加display: flex，开启Flex布局
• 输入框设置flex: 1，表示它会占据容器中除了按钮之外的所有剩余空间
• align-items: center让输入框和按钮垂直居中对齐，视觉更协调
• 去掉了按钮的float: right，Flex布局会自动处理元素排列
• 可以给输入框和按钮去掉默认边框，让样式更贴合父容器的背景

方案二：calc() 计算宽度（兼容旧浏览器） #

如果你需要兼容一些不支持Flexbox的旧浏览器，可以用calc()来手动计算输入框的宽度，但需要知道按钮的大致宽度（比如按钮总宽度是64px）：

<div style="margin: 8px; margin-bottom: 32px; padding: 1px; background-color: #888; overflow: hidden;">
  <button type="submit" style="float: right; padding: 16px; border: none; background-color: transparent; cursor: pointer;">
    <i class='fa fa-search'></i>
  </button>
  <input type="text" name="search" placeholder="Search..." style="padding: 14px; font-size: 16px; width: calc(100% - 64px); border: none; outline: none; background-color: transparent;">
</div>

关键说明： #

• 父容器添加overflow: hidden，防止输入框溢出
• 按钮保持float: right，先占据右侧空间
• 输入框用width: calc(100% - 64px)，这里的64px是按钮的总宽度（内边距+内容宽度），你可以根据实际按钮尺寸调整

两种方案都能实现你要的效果，优先推荐Flexbox，因为它更灵活，不用依赖固定的按钮宽度，适配性更好。

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