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

问题描述 投票:1回答:2

我正在尝试使用flex在顶行显示用户ID和复选标记,在第二行显示文本框。我无法做到这一点,所以非常感谢任何帮助。

这就是我得到的:

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

这就是我要的:

css flexbox
2个回答
2
投票

更改HTML(在</div>之后移动关闭flex<img>

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

2
投票

我把user idimg放在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>
© www.soinside.com 2019 - 2024. All rights reserved.