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

Question

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

• 在标签元素内输入(而不是使用id和标签)
• 输入应占据剩余宽度的100%

它不应该那么难,但我尝试了很多其他例子的方法; 使用浮动,溢出:隐藏,限制周围元素的高度等.没有100%宽度也可以,但这不是一个选项.

我之所以不使用label-for(确实有效)的原因是在同一页面上会有几个相同的输入字段.它们相当复杂,所以我手动创建一个然后用jQuery克隆它N次,如果使用ID则会破坏它.

基本出发点:

input {
  width: 100%;
}

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

准备一个小提琴:https://jsfiddle.net/8uuhhcon/

Answer 1

试试Flexbox

label {
  display: flex;
}

input {
  flex: 1;
}

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