Javascript 输入以填充标签的剩余宽度

我试图在HTML中实现以下目标：

• 在标签元素内部输入（而不是使用ID和标签）
• 输入应占剩余宽度的100%

这应该没那么难，但我已经尝试了其他例子中的很多方法；使用浮动、溢出：隐藏、限制周围元素的高度等。没有100%宽度也可以，但这不是一个选项

我不想使用label for（它确实有效）的原因是在同一页面上有几个相同的输入字段。它们相当复杂，所以我手动创建了一个，然后用jQuery克隆了N次，如果使用IDs的话，这会非常糟糕

基本出发点：

输入{
宽度：100%；
}

姓名：

试试Flexbox

标签{
显示器：flex；
}
输入{
弹性：1；
}

名称：

如果您可以将name:包装成一个span左右，比如

name:

，那么您可以尝试CSS表

标签{
宽度：100%；
显示：表格；
}
跨度，输入{
显示：表格单元格；
}
跨度{
宽度：1%；/*给出一个小值*/
空白：nowrap；/*防止包装，即“用户名”*/
垂直对齐：中间；/*或顶部/底部（根据需要）*/
}
输入{
宽度：99%；/*给出一个较大的值*/
}

姓名：

你的问题是什么？取决于你对IE的支持，这可能不适合你@这是一个很好的解决方案你为什么要支持。。。OP中没有关于IE支持的内容post@Anonymous在过去3年中，我为之工作或为之提供咨询的每家公司都至少支持IE9，有些甚至支持IE8。实际上，每家企业公司仍在使用某种形式的IE（出于某种原因，当我告诉他们不要这样做时，他们不听我的；-）。所以基本上任何“工作中”的项目通常都有一定程度的IE支持。IE11（仍然支持）有相当多的bug flexbox。MS Edge最终在flexbox上运行良好，但它只有Win10，所以没有多少人拥有它…@CodingWithSpike OK先生；）。。。那么这是给你的-@Anonymous是的，这也是一个选择。不要误会我的意思，我没有说“不要使用此”，我只是在那里发表评论，如果有支持IEThat的需求，谢谢！它可能比使用flexbox更具交叉兼容性，因此对于需要支持IE9的人来说非常有用，但在我的特殊情况下，flexbox解决方案的简单性是压倒性的。