text-align: right 仅使块级元素内部行内内容水平右对齐，不移动元素自身位置；若失效，多因错误施加于子元素而非其块级父容器。

text-align: right 是让块级元素内部内容居右最直接有效的方式，但它只影响子元素的**水平排列位置**，不改变块级元素自身在父容器中的位置。

为什么 text-align: right 有时没反应？

常见原因是作用对象错了：它必须写在**包含目标内容的块级父元素**上，而不是写在要居右的那个子元素自己身上。

• 错误写法：<div style="text-align: right;">文字</div> —— 这会让“文字”在该 div 内靠右，但若这个 div 本身是块级且没设宽，它仍会撑满父容器，视觉上没变化
• 正确写法：<div><span style="display: inline-block;">按钮</span></div>，再给外层 div 加 style="text-align: right;"
• span、img、button 等默认是行内或行内块，天然响应 text-align；但子 div 默认是块级，需显式加 display: inline-block 才生效
• 如果子 div 宽度为 100%，inline-block 会退化失效——得先收窄或用 max-width

想让整个块级元素自身靠右，别用 text-align

text-align 不控制块级元素的位置。要移动块级元素本身，得换方法：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 用 margin-left: auto：前提是父容器设了 display: flex，子元素加 margin-left: auto 即可右贴边（推荐，语义清晰、兼容好）
• 用 position: absolute：父容器加 position: relative，子元素加 position: absolute; right: 0（适合固定定位，比如右上角关闭按钮）
• 避免用 float: right：它会破坏文档流，引发父容器塌陷，现代布局中已不推荐用于对齐目的

text-align: right 在响应式中容易被忽略的细节

小屏幕下，右对齐的文字可能被截断或挤出视口，尤其当内容较长又没限制换行时：

• 加 white-space: nowrap 防止意外换行（慎用，可能溢出）
• 加 overflow: hidden 或 text-overflow: ellipsis（配合 white-space: nowrap 和 width）做截断处理
• 和 direction: rtl 同时使用时，text-align: right 表现可能反直觉，建议单独测试

真正难的不是选哪个属性，而是分清“内容居右”和“元素居右”——前者用 text-align，后者得靠 flex、position 或 margin。混用或错配，八成会卡住半天。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！