[英]left and right aligned text inside input element (name: value) + flexible
What I need: I need value name text (align left) and value itself (align right) inside <input>
element. 我需要什么:我需要在<input>
元素内的值名称文本(左对齐)和值本身(右对齐)。 It must be flexible (input width and height will change) 它必须是灵活的(输入宽度和高度会改变)
I worked out static solution involving <span>
and some css, but it is not flexable. 我制定了涉及<span>
和一些CSS的静态解决方案,但它不灵活。 I am resizing elements depending on device viewport and that solution is not working for me. 我正在根据设备视口调整元素的大小 ,该解决方案不适用于我。
html: HTML:
<div id="subgroup-input-supply">
<span>Supply:</span>
<input id="input-supply" type="text" value="100%" readonly>
</div>
css: CSS:
#subgroup-input-supply span{
position: absolute;
margin-left: 2px;
margin-top: 1px;
}
#input-supply{
text-align: right;
}
Try to add position:relative
to your parent. 尝试添加position:relative
对于您的父母。 That'll keep them in place. 这样可以使它们保持在原位。
https://jsfiddle.net/cj0sk9xh/2/ https://jsfiddle.net/cj0sk9xh/2/
Position absolute: The element is positioned relative to its first positioned (not static) ancestor element. 绝对位置:元素相对于其第一个定位(非静态)祖先元素的位置。
So make its first parent element position relative
. 因此,使其第一个父元素位置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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.