html - 我需要在标签 HTML/CSS 旁边放置一个 20x20 的小图像，该图像一直在其下方。我应该使用 div 吗？

Question

enter image description here HTML

 <div id="rectangle">
  <img src='./assets/images/logo.png'>
  <label id="in-out">Clock In / Out</label>
  <label id="time-label">Time:</label>
  <label id="timenum">1:23 PM</label>
  <label id="employeepin">Employee PIN</label>
  <input id="pinbox" type="text" name="pin">
  <button id="enter" type="button">Enter</button>


  <img id="chevron" src="./assets/images/chevron-right.png">
  <label id="username">Or, Log In with Username and Password. </label>


</div>

用户名标签和图像的 CSS。

#username {
  height: 48px;
  width: 328px;
  margin-left: 106px;
  margin-right: 1px;
  margin-top: 1px;

}
#chevron {
  width: 20px;
  height: 20px;
  margin-left: 380px;
  margin-right: 106px;
  margin-top: 1px;
}

我需要它说“或使用您的用户名和密码登录”。声明右侧的 20px x 20px 图像。谢谢

Answer 1

像这样的东西会起作用

   #username {
     height: 48px;
     width: 328px;
     margin-left: 106px;
     margin-right: 1px;
     margin-top: 1px;
     position: relative;
     display: flex;
     align-items: center;
    }
    #chevron {
     height: 20px;
      width: 20px;
      position: absolute;
      right: 0px;
      top: 14px;
     }

    
<label id="username">Or, Log In with Username and Password. <img id="chevron" src="https://png.icons8.com/metro/1600/search.png"></label>