html - 我需要在标签 HTML/CSS 旁边放一个 20x20 的小图像,图像一直在它下面。我应该使用 div 吗?
问题描述
在此处输入图像描述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 图像。谢谢
解决方案
像这样的东西会起作用
#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>
推荐阅读
- sql - MS Access 根据其他列数据平均一个值
- algorithm - 如何在不使用 DFS 的情况下有效地找到无向图中的所有哈密顿路径?
- laravel - 如何在 Laravel 7 中设置全局 Carbon 格式
- javascript - 无需刷新页面即可实时选择计费和更新价格
- ios - CloudKit 数据仅在模拟器和第一台设备中不更新第二台设备
- javascript - 谷歌浏览器扩展中的 Firebase 云消息传递
- angular - 有一种方法可以创建一种 Angular 2+ 组件“工厂”并使用 ComponentFactoryResolver 解决它?
- node.js - 猫鼬:找到一个嵌套的 id?
- python - 在 Dataframe 中使用 .loc 性能不佳
- javascript - JS浏览器:检查getUserMedia()产生的错误是否是DOMException错误对象