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

标签 javascript html css

我需要什么: 我需要值名称文本(左对齐)和值本身(右对齐)在 <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;
}

What i am trying to do

JS Fiddle DEMO

最佳答案

尝试将 position:relative 添加到您的父级。这将使它们保持原位。

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

关于javascript - 输入元素内的左右对齐文本(名称 : value) + flexible,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43721728/

相关文章:

javascript - 如何自动大写 phonegap for Android 中的文本输入?

html - 移动时在内容中插入边栏 (bootstrap 3)

javascript - 什么时候使用 $scope.$apply() 是安全的?

javascript - 为什么这个 JS 变量在页面加载时运行

javascript - html标签是否停止传播?

html - 让 PDF 保留在嵌入的 <object> 或 &lt;iframe&gt; 中

css - Wordpress 菜单居中对齐且间距均匀

css - 在 CSS 中计算像素和百分比的更好方法(或替代方法)?

javascript - 如何在javascript中将值作为参数传递

javascript - 我的 HTML 文件不会链接到我的 Javascript 文件