输入元素内的左右对齐文本（名称：值）+灵活

Question

我需要什么：我需要在<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;
}

JS Fiddle演示

Answer 1

尝试添加position:relative对于您的父母。 这样可以使它们保持在原位。

https://jsfiddle.net/cj0sk9xh/2/

Answer 2

绝对位置：元素相对于其第一个定位（非静态）祖先元素的位置。

因此，使其第一个父元素位置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>