Question

我正在尝试使用flex在第一行中显示用户ID和复选标记，在第二行中显示文本框。我无法执行此操作，因此非常感谢您的帮助。

这就是我得到的：

My display

<body>        
  <div style="display:flex; flex-direction:row; width:100%;">
       <div>User ID</div>
       <img style="margin-right:3px; align-self:center;" src="correct.png" /> 
       <div><input type="text" name="fname"></div> 
  </div>      
</body>

这就是我想要的：

What I want

Answer 1

我将user id和img放入1 div中并制成flex

<body>
  <div>
    <div style="display:flex; width:100%;">
      <div>User ID</div>
      <img style="margin-right:3px; align-self:center;" src="correct.png" />
    </div>
    <div><input type="text" name="fname"></div>
  </div>
</body>

Answer 2

更改HTML（在</div>之后移到flex的{{1}}的结尾处）

<img>

如何在一行中显示两个孩子，在第二行中显示第三个孩子

2 个答案: