同じ行に入力を保存してテキストを折り返す方法

Question

UIの下に問題を設計しています。

[text1] [inputBox1] 
[text2] [inputBox2] 
[text3] [inputBox3] 

text1、text2、text3は可変長であってもよい。テキストの長さが増えると幅が増え、入力ボックスが右に移動します。テキストがはるかに長い場合、テキストの折り返しが発生するはずです。誰かがフレックスボックスを使うべきだと提案しましたが、私はそれをどのように使い始めるべきか考えていません。誰か助けてもらえますか？

基本構造

<div> 
    <div>text1</div> 
    <div>inputBox1</div> 
    <div>text2</div> 
    <div>inputBox2</div> 
    <div>text3</div> 
    <div>inputBox3</div> 
    . 
    . 
    . 
    . 
</div> 

Answer 1

サラウンドクラスのラインを持つdiv要素内の各入力とテキスト。次に、クラスラインのそれぞれのdivをdisplay:flex;に渡します。各

.line{ 
 
    display:flex; 
 
} 
 
input{ 
 
    margin-left:auto; 
 
}

<div> 
 
    <div class="line"> 
 
    <div>This is a lot of repeating pointless text. This is a lot of repeating pointless text.</div> 
 
    <input> 
 
    </div> 
 
    <div class="line"> 
 
    <div>This is a lot of repeating pointless text.</div> 
 
    <input> 
 
    </div> 
 
    <div class="line"> 
 
    <div>text3</div> 
 
    <input> 
 
    </div> 
 
</div>

Answer 2

AisgnクラスまたはIDあなたにコンテナと子の間diferentiateのDIVにこのようなコードをCSS：

<div id="container"> 
    <div id="wrapper"> 
     <div class="textChild">text1</div> 
     <div class="inputChild">inputBox1</div>   
    </div> 
    . 
    . 
    . 
    </div> 

次に、あなたのすべてのdiv要素をフォーマットするためにCSSを使用flexboxモデルを使用してコンテナ ここで、#wrapperはフレックス表示コンテナで、.textChildとinputChildはflexプロパティが1と定義された子要素です。便利な例on this answer