入力要素（名前：値）+フレキシブル内で左右に整列されたテキスト

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>