使输入框填充标签的剩余宽度

Question

我试图在HTML中实现以下内容：

• 将输入框放在标签元素内（不想使用id和label for）
• 输入框应占用其剩余宽度的100％

这并不难，但我尝试了许多其他示例的方法：使用浮动、溢出: hidden、限制周围元素的高度等。 不具有100％宽度也可以，但这不是一个选项。

我不想使用label-for的原因（它确实有效）是同一页上会有几个相同的输入字段。它们相当复杂，因此我手动创建一个，然后使用jQuery N次进行克隆，如果使用ID，则会出现严重问题。

基本起点：

input {
  width: 100%;
}

<label>
  name:
  <input type="text" />
</label>

这里准备了一个 fiddle 示例：https://jsfiddle.net/8uuhhcon/

（注：fiddle 是一个在线代码编辑器和调试工具）

- Setomidor

---

你有什么问题吗？ - Moumit

Answer 1

尝试使用Flexbox

label {
  display: flex;
}

input {
  flex: 1;
}

<label>name:
  <input type="text" />
</label>

- Nenad Vracar

---

根据您对IE的支持情况，该功能可能无法正常工作。http://caniuse.com/#search=flex - CodingWithSpike

@CodingWithSpike 这是一个很好的解决方案，为什么你想要支持过时的IE？... OP帖子中没有关于IE支持的内容。 - Anonymous

@匿名用户，我在过去三年里为所有的公司工作或提供咨询服务，他们都支持至少IE9，有些甚至还支持IE8。实际上，几乎所有的企业公司仍然使用某种形式的IE（但出于某种原因，当我告诉他们不要使用IE时，他们并不听我的;-)）。因此，基本上任何“在工作中”的项目通常都具有某种程度的IE支持。IE11（仍然受支持）具有相当多的flexbox错误。MS Edge最终可以很好地与flexbox配合使用，但它只适用于Win10，所以没有太多人使用它... - CodingWithSpike

@CodingWithSpike 好的，先生；) ……那么这个是给你的 - https://github.com/10up/flexibility - Anonymous

@CodingWithSpike 是的，先生，您说得对，我也在尝试指出一个选项，如果我听起来很粗鲁，我很抱歉 ;) - Anonymous

Answer 2

如果您可以将name:包装到一个类似于<span>name:</span>的标签中，您可以尝试使用CSS表格。

label {
  width: 100%;
  display: table;
}
span, input {
  display: table-cell;
}
span {
  width: 1%; /*give a small value*/
  white-space: nowrap; /*prevent wrapping i.e. "user name"*/
  vertical-align: middle; /*or top/bottom as needed*/
}
input {
  width: 99%; /*give a large value*/
}

<label>
  <span>name:</span>
  <input type="text" />
</label>

- Stickers

---

可以的，谢谢！这种方法可能比使用Flexbox更具有跨浏览器兼容性，因此对于需要支持IE9的人来说可能很有用，但在我的特定情况下，Flexbox解决方案的简单性是压倒一切的。 - Setomidor