Question

我在UI下设计时遇到问题。

[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>

Answer 1

使用类行环绕div中的每个输入和文本。然后给每个div添加类行display:flex;。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

每个div的Aisgn类或id，以便在你的css代码中区分容器和子代之间的区别：

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

接下来，使用css使用flexbox模型格式化容器中的每个div，其中#wrapper是具有display flex的flexbox容器，而.textChild和inputChild是你的子元素，flex属性定义为1或其他，你可以在this answer上找到有用的例子

如何在保持同一行输入的同时包装文本

2 个答案: