如何实现div与文本输入框并排且输入框占满剩余宽度？

这个需求我太熟啦，用CSS里的**浮动+BFC（块级格式化上下文）**就能完美解决，你已经摸到核心门道了，我帮你把代码补全并拆解下原理：

完整可运行代码示例 #

<style>
.wrap {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  background: #EFEFEF;
  margin-top: 30px;
}
#url {
  margin: 6px 2px 0 0;
  float: left; /* 让文本div靠左浮动，让出右侧空间 */
  white-space: nowrap; /* 强制文本不换行，保证div宽度由内容自然决定 */
}
#input_1 {
  box-sizing: border-box;
  overflow: hidden; /* 触发BFC，让输入框自动填充剩余宽度 */
  padding: 3px;
  font-size: 12px;
  width: auto; /* 不需要固定宽度，完全自适应剩余空间 */
}
</style>

<div class="wrap">
  <div id="url">http://example.com/images/</div>
  <input id="input_1" type="text" placeholder="请输入图片文件名">
</div>

关键布局原理拆解 #

• #url 左浮动：让这个文本div脱离常规文档流，靠左侧排列，它的宽度完全由内部文本内容决定，不会占用容器的全部宽度。加上white-space: nowrap是为了避免文本换行，保证div宽度始终是内容的自然宽度。
• #input_1 设置 overflow: hidden：这是核心操作！它会触发元素的BFC特性，BFC元素会自动避开浮动元素，并且自动填充容器的剩余空间——不需要给输入框设置任何固定宽度，就能完美适配剩余区域。
• 全局 box-sizing: border-box：这个属性一定要加，它让元素的padding和border都包含在设置的宽度内，避免因为padding导致元素撑破容器，保证布局的稳定性。

后续如果要调整两个元素的间距，直接修改#url的margin值就行，不管#url的内容变长还是变短，输入框都会自动填充剩下的空间，完全适配你的需求~

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