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

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 DEMO

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>