如何在保持輸入在同一行上的同時包裝文本

-1

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

text1，text2，text3可以變長。所以如果文本的長度增加，寬度應該增加並且輸入框向右移動。如果文本比文本包裝要長得多，則應該發生。有人建議我應該使用flexbox，但我不知道如何開始使用它。有人可以幫我嗎？

基本結構

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

來源

2016-08-10 Mukesh Gupta

「文字環繞應該發生」你想要inputBox留在同一行嗎？你有沒有相關的CSS？ – TylerH

請說明您的具體問題或添加其他詳細信息，以確切地突出你所需要的。正如目前所寫，很難確切地說出你在問什麼。預期狀態的一些圖像將是理想的。 –

環繞與類線一個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>

來源

2016-08-10 15:51:42 Wowsk

我們可以垂直對齊文本框嗎？即輸入框的起點位於一條線上。爲此，我們可以在第二個輸入框的行中移動第一個和第三個輸入框？ –

我改變了我的例子。這是你想要的嗎？ – Wowsk

Aisgn class和id給每個div來在你的容器和孩子之間diferentiate CSS代碼是這樣的：

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

接下來，使用CSS來在每一個格格式化使用flexbox模型的容器，其中#wrapper是顯示flex的flexbox容器，.textChild和inputChild是flex屬性定義爲1或其他內容的子元素，您可以查找有用的例子this answer

來源

2016-08-10 15:51:56 xzegga

如何在保持輸入在同一行上的同時包裝文本

回答

相關問題