如何在带标签容器中拉伸输入框填满容器（不使用Flexbox）

方法一：浮动+Overflow Hidden（推荐，无需计算宽度） #

这种方法无需手动计算宽度，输入框会自动填充容器剩余空间，兼容性出色。

修改后的HTML（将标签文本包裹在<span>中，方便样式控制）：

<label for="name--expense" class="name--expense">
  <span>Name:</span>
  <input type="text" id="name--expense" />
</label>

对应的CSS：

.name--expense {
  display: block;
  line-height: 2.5rem;
  /* 可选：添加内边距，让内容不紧贴容器边缘 */
  padding: 0 8px;
  box-sizing: border-box;
}

/* 让标签文本左浮动，占据预留空间 */
.name--expense span {
  float: left;
  margin-right: 8px; /* 标签与输入框之间的间距 */
}

/* 输入框自动填充剩余空间 */
.name--expense input {
  display: block;
  overflow: hidden;
  width: auto;
  line-height: inherit;
  box-sizing: border-box;
  /* 重置input默认样式，可选 */
  border: 1px solid #ccc;
  padding: 0 4px;
}

方法二：绝对定位+内边距预留空间 #

如果不想修改HTML结构，可以用绝对定位固定标签文本位置，通过容器内边距给标签预留空间：

CSS代码：

.name--expense {
  display: block;
  line-height: 2.5rem;
  position: relative;
  padding-left: 60px; /* 标签名称的预留宽度，可根据实际调整 */
  box-sizing: border-box;
}

/* 固定标签文本的位置 */
.name--expense::before {
  content: "Name:";
  position: absolute;
  left: 8px;
  top: 0;
  line-height: inherit;
}

.name--expense input {
  display: block;
  width: 100%;
  line-height: inherit;
  box-sizing: border-box;
  padding: 0 4px;
  border: 1px solid #ccc;
}

注意：使用这种方法需要移除原HTML中的Name:文本，避免重复显示。

核心要点说明 #

• 必须设置box-sizing: border-box，确保元素的内边距和边框不会撑开容器宽度，避免布局溢出。
• 两种方法都不依赖Flexbox，兼容IE8及以上浏览器。

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