输入填充标签的剩余宽度 [英] 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屋!