输入填充标签的剩余宽度 [英] Make input to fill the remaining width of label

问题描述

我想在HTML中实现以下内容：

• 在标签元素内输入（而不是使用ids和label） li>
  
• 输入应占据剩余宽度的100％

但我已经尝试了许多其他例子的方法;使用浮动，溢出：隐藏，限制周围元素的高度等。不具有100％宽度也可以，但这不是一个选项。

使用label-for（其工作）是在同一页面上将有几个相同的输入字段。它们是相当复杂的，所以我手动创建一个，然后克隆它与jQuery N次，然后如果使用ID，将会打破可怕。

基本起点：

  input {width：100％;}  

 < label> name：< input type =text/>< / label>  

在这里准备一个小提琴： https://jsfiddle.net/8uuhhcon/

解决方案

尝试 Flexbox

  label {display：flex;} input {flex：1;}  

 < label> name：< input type =text/>< / label>  

>

I am trying to achieve the following in HTML:

• input inside label element (rather not use ids and label for)
• input should occupy 100% of whatever width is remaining

It shouldn't be that hard, but I've tried lots of approaches from other examples; using floats, overflow: hidden, limiting the height of surrounding elements, etc. Not having 100% width works too, but that's not an option.

The reason I rather not use label-for (which does work) is that there will be several identical input fields on the same page. They are rather complex so I create one manually and then clone it with jQuery N times, which then would break horribly if using IDs.

Basic starting point:

input {
  width: 100%;
}

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

Prepared a fiddle here: https://jsfiddle.net/8uuhhcon/

解决方案

Try Flexbox

label {
  display: flex;
}

input {
  flex: 1;
}

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

这篇关于输入填充标签的剩余宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！