javascript - 输入元素内的左右对齐文本(名称 : value) + flexible

Question

我需要什么:我需要值名称文本(左对齐)和值本身(右对齐)在 <input> 中元素。一定要灵活(输入宽高会变化)

我制定了涉及 <span> 的静态解决方案和一些 css，但它不灵活。我正在根据设备视口(viewport)调整元素的大小，但该解决方案对我不起作用。

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/