我需要什么:
我需要<input>
元素内的值名称文本(左对齐)和值本身(右对齐)。它必须是灵活的(输入宽度和高度会改变)
我制定了涉及<span>
和一些css的静态解决方案,但它不具备灵活性。我根据设备视口调整大小元素,并且该解决方案对我不起作用。
HTML:
<div id="subgroup-input-supply">
<span>Supply:</span>
<input id="input-supply" type="text" value="100%" readonly>
</div>
的CSS:
#subgroup-input-supply span{
position: absolute;
margin-left: 2px;
margin-top: 1px;
}
#input-supply{
text-align: right;
}
答案 0 :(得分:0)
尝试将position:relative
添加到您的父级。这将使他们保持原状。
答案 1 :(得分:0)
绝对位置:元素相对于其第一个定位(非静态)祖先元素定位。
因此,请将其第一个父元素位置relative
。
#subgroup-input-supply{
position:relative;
}
#subgroup-input-supply span{
position: absolute;
margin-left: 2px;
margin-top: 1px;
}
#input-supply{
text-align: right;
}
<div id="subgroup-input-supply">
<span>Supply:</span>
<input id="input-supply" type="text" value="100%" readonly>
</div>