テキストに必要なだけスペースを割り当て、次に残りの部分をテキストの右側に配置するtextInput

Question

私はTextのコンポーネントとTextInputを横に並べています。 TextInputのデバイスの残りの部分を残す必要があります。 flexboxでどうすればいいですか？または他のツール？ Dimensionsは私にTextの長さを与えるので、それをテキストに割り当てることができますか？

Answer 1

あなたは下のスニペットから何が起こっているの要点を得ることができるはずです。これをあなたのニーズに合わせてください。

var containerWidth = document.getElementById("container").offsetWidth; 
 
var labelWidth = document.getElementById("label").offsetWidth; 
 
var inputWidth = containerWidth - labelWidth - 1 + "px" 
 
document.getElementById("input").setAttribute("style", `width: ${inputWidth}`);

#container { 
 
    width: 300px; 
 
} 
 
#label { 
 
    float: left; 
 
} 
 
#container, #input, #label { 
 
    box-sizing: border-box; 
 
}

<div id="container"> 
 
    <label for="input" id="label">Label</label> 
 
    <input id="input" type="text" /> 
 
</div>