css设置div的2个span一个在最左边,一个在最右边

界面:

代码:

bash 复制代码
<html>

<style>

.top span {
  display: block;
  position: absolute;
  margin: 0 20px; /* 添加边距以避免太靠近边缘 */
}

.top span:nth-child(1) {
  left: 5px; /* 调整左侧位置 */
}

.top span:nth-child(2) {
  right: 5px; /* 调整右侧位置 */
}

</style>

<body>
  <div class="top">
      <span>最左边</span>
      <span>最右边</span>
  </div>
</body>

</html>
相关推荐
喜欢踢足球的老罗13 小时前
Chrome MV3 插件架构深度解析:Service Worker 生命周期与 Token 管理的三层博弈
前端·chrome·架构
小李云雾13 小时前
Pinia:Vue3 全局状态管理从入门到精通
前端·javascript·vue.js
Upsy-Daisy13 小时前
Hermes Agent 学习笔记 03:CLI 与 TUI 使用体验,让 Agent 真正进入终端工作流
服务器·前端·数据库
KaMeidebaby13 小时前
卡梅德生物技术快报|噬菌体筛选:技术实操:宽谱大肠杆菌噬菌体筛选全流程与性能验证方案
前端·人工智能·算法·数据挖掘·数据分析
风吹夏回13 小时前
Vue3 + Element Plus 完整使用指南
前端·javascript·vue.js·element
影寂ldy13 小时前
C# 泛型方法
java·前端·c#
依托偶尔宁13 小时前
element-plus:el-table设置展开图标所在列的位置
前端·elementui
小小龙学IT13 小时前
Go语言后端开发实战指南:构建高性能云原生服务
前端·云原生·golang
sbjdhjd21 小时前
Redis 主从复制、哨兵高可用与 Cluster 集群部署实验手册
运维·前端·redis·云原生·开源·bootstrap·html
乐兮创想 小林1 天前
企业官网移动端性能优化实战:从 Core Web Vitals 到图片/CDN/响应式的工程清单
前端·性能优化·网站建设·北京网站建设公司