text-align 作用于块级容器内行内内容的对齐，而非元素自身居中；span 默认行内，无内部空间，需包裹在块级元素中才生效。

text-align 只作用于块级容器内的行内内容，不是“让元素自己居中”，而是“让它的子内容在它内部对齐”——这点搞错，90% 的对齐问题就卡住了。

为什么 text-align: right 对 <span></span> 没反应？

因为 <span></span> 默认是行内元素，没有自己的“内部空间”供 text-align 发挥作用。你给它加 text-align: right，就像给一张贴纸写“请把自己贴在右边”——它没地方贴。

• 正确做法：把 <span></span> 包进一个 <div> 或其他块级元素，再对那个父容器设 <code>text-align: right
• 错误写法：<span style="text-align: right">文字</span> —— 无效
• 有效写法：<div style="text-align: right"><span>文字</span></div>

用 flex 实现 <span></span> 居右，但别漏掉父容器

Flex 布局真正控制的是**父容器如何排列子元素**，不是子元素自己“决定往哪靠”。所以必须给父容器设 display: flex，再用 justify-content 或 margin-left: auto 推动目标元素靠右。


Wechat Article Html
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
下载
• 两端对齐（左一个、右一个）：justify-content: space-between
• 只推最后一个靠右：margin-left: auto 加在目标 <span></span> 上（需确保它是 flex 子项）
• 常见遗漏：忘了给父容器加 display: flex，只加了子项的 margin-left: auto —— 完全没效果

float: right 还能用，但得手动清浮动

虽然 float 是老方案，但在简单布局（比如页眉右侧放个登录链接）里依然可靠，前提是父容器要“兜住”它，否则会塌陷。

立即学习“前端免费学习笔记（深入）”；

• 必须给父容器加 overflow: hidden 或 display: flow-root 来清除浮动
• float: right 会让元素脱离文档流，后续兄弟元素会上移——如果不想这样，得额外处理
• 响应式场景下，float 不如 flex 或 grid 易于调整，慎用于复杂结构

最易被忽略的一点：对齐行为永远由**父容器的 display 类型和所用对齐属性共同决定**，单独改某个子元素的样式，几乎从不生效。先想清楚“谁在排谁”，再选 text-align、flex 还是 float。