text-align: right 是让块级元素内文字靠右显示最直接可靠的方式，仅影响行内内容对齐而不改变元素布局，对 span 等行内元素无效，需包裹于块级容器或设 display: block；表格单元格需单独设置，数字列还应配合 tabular-nums 和等宽字体；若要使整个块级元素右对齐，则需用 margin-left: auto、float 或 Flex 布局。
text-align: right 是让文字靠右显示最直接、最可靠的方式，其他方法（如 float、margin-left: auto）适用场景不同，不能替代它。
用 text-align: right 控制块级元素内文字对齐
这是标准做法，适用于 p、div、h1～h6 等块级容器内的文字。它只影响“行内内容”的水平对齐位置，不改变元素自身在页面中的布局。
- 内联写法最快速：
<p style="text-align: right;">文字靠右</p> - 类名复用更规范：
<style> .text-right { text-align: right; } </style>+<p class="text-right">文字靠右</p> -
span是行内元素，单独加text-align: right无效；必须包裹在块级容器里，或显式设display: block - 若文字仍左对齐，大概率是 CSS 优先级被覆盖——打开浏览器开发者工具的 “Computed” 面板，看最终生效的
text-align值是不是right
表格单元格（td/th）右对齐必须作用于单元格本身
给 table 或 tr 设置 text-align: right 是无效的，因为 td 默认不继承该属性。数字列尤其要注意这点，否则小数点会错位。
- 正确写法：
<td style="text-align: right">123.45</td>或td.amount { text-align: right; } - 表头
th默认居中，也要单独声明：th.amount { text-align: right; } - 仅靠
text-align: right不足以让数字纵向对齐；需配合font-variant-numeric: tabular-nums和等宽字体（如SFMono-Regular） - 避免前后空格：
<td> 123.45 </td>中的空格会被保留，导致右侧多出空白
让整个块级元素（如 div）在父容器中靠右，不是用 text-align
如果目标是把一个盒子“推到右边”，而不是盒子里的文字靠右，那 text-align 就不对路了。这时候要改元素自身的定位或外边距。
立即学习“前端免费学习笔记（深入）”；
- 传统方式：
<div style="float: right;">右浮动块</div>—— 但需注意清除浮动（clear: both），且会脱离文档流 - 现代推荐：
<div style="display: block; margin-left: auto;">右对齐块</div>—— 简洁、不脱离流、兼容性好 - Flex 布局更灵活：父容器设
display: flex; justify-content: flex-end;，子元素自动右对齐 -
text-align: right对img标签本身没用；想让图片右对齐，得控制它的父容器（div）或用margin-left: auto
真正容易被忽略的是语义和上下文：右对齐不是视觉问题，而是排版意图问题。金额、时间、编号列适合右对齐，但姓名、描述、状态列通常不该右对齐；框架重置样式、字体特性、空格处理这些细节，往往比写一行 text-align: right 更耗调试时间。
