技术栈

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

奶茶不甜o2024-03-29 20:43

界面:

代码:

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>
上一篇:为什么Rust语言不支持三元表达式?
下一篇:制造业上云解决方案
相关推荐
荣达
1 天前
koa洋葱模型理解
前端·后端·node.js
小刘鸭地下城
1 天前
网页深色模式完整实现:从响应式设计到系统主题联动
css
reembarkation
1 天前
使用pdfjs-dist 预览pdf,并添加文本层的实现
前端·javascript·pdf
reembarkation
1 天前
vue-pdf 实现blob数据的预览
javascript·vue.js·pdf
李明卫杭州
1 天前
JavaScript中的dispatchEvent方法详解
javascript
KenXu
1 天前
F2C-PTD工具将需求快速转换为代码实践
前端
给月亮点灯|
1 天前
Vue3基础知识-setup()、ref()和reactive()
前端·javascript·vue.js
芜青
1 天前
【Vue2手录12】单文件组件SFC
前端·javascript·vue.js
冷冷的菜哥
1 天前
react实现无缝轮播组件
前端·react.js·typescript·前端框架·无缝轮播
hrrrrb
1 天前
【Python】字符串
java·前端·python
热门推荐
01GitHub 镜像站点02UV 工具安装与国内镜像源配置指南03UV安装并设置国内源04Claude Code 平替:OpenAI发布 Codex CLI ,GPT-5 国内直接使用0546个Nano-banana 精选提示词,持续更新中06A股预测还能更准?开源大模型Kronos带你跑通预测+回测全流程07conda中设置镜像地址(附所有可换的地址)08保姆级教程:手把手教你用Dify实现完美多轮对话(附Chatflow和提示词)09KGG转MP3工具|非KGM文件|解密音频10解决 WSL Ubuntu 中 /etc/resolv.conf 自动重置问题