text-align: right作用于父容器时子div仍贴左，因其仅控制行内内容对齐，不改变块级元素自身位置；实现块级元素右对齐需用margin-left: auto（配合display: block）、Flex布局（justify-content: flex-end）或绝对定位等方案。
text-align 只控制行内内容对齐，不移动块级标签本身；移动端左右对齐必须结合布局上下文选方案，不是加个属性就完事。
为什么 text-align: right 加在父容器上，子 div 还是贴左？
因为 text-align 不作用于块级子元素的位置，只影响其内部文字、span、img（当为行内时）等的水平位置。给一个 div 设 text-align: right，只是让里面文字右对齐，那个 div 自己仍按文档流从左开始排列。
常见错误现象：
- 给
.container { text-align: right; }，里面<div class="card">...</div>依然靠左 - 在 iOS Safari 旧版中，
text-align对inline-block元素表现不稳定，尤其配合vertical-align时
真正要让块级标签“挪到右边”，得用以下方式之一。
立即学习“前端免费学习笔记（深入）”；
margin-left: auto 配 display: block 最稳
这是移动端单个块级标签右对齐最轻量、兼容性最好的做法，iOS 9+ 和 Android WebView 均无问题。
必须满足两个条件：
-
display: block（或inline-block，但需注意换行和空白符） - 水平方向有剩余空间——即不能设
width: 100%，也不能依赖width: auto（由内容撑开）
示例：
<div class="btn-wrapper"> <button type="button">提交</button> </div>
CSS：
.btn-wrapper button {
display: block;
margin-left: auto;
}
如果按钮需要固定宽度（比如 120px），可加 width: 120px；若想自适应内容宽，就别设 width，但确保父容器足够宽。
Flex 布局适合多元素并排控制
当你要把一组标签（如图标+文字+开关）整体右对齐，或需要响应式切换对齐方式，display: flex 是首选。
关键点：
- 对齐行为由父容器控制：
justify-content: flex-end→ 右对齐，flex-start→ 左对齐，center→ 居中 - 避免在
flex容器里混用float或text-align，会冲突 - 老版 iOS Safari（≤ iOS 9.3）对
justify-content在单行容器中支持不稳，建议加align-items: flex-start显式重置交叉轴
示例（右对齐两个按钮）：
<div class="action-bar" style="display: flex; justify-content: flex-end; align-items: flex-start;"> <button>取消</button> <button>确定</button> </div>
绝对定位慎用：仅限固定尺寸容器内精准偏移
用 position: absolute + right: 0 能强行把标签钉在右侧，但前提是父容器设了 position: relative，且你清楚该标签脱离文档流后不会挤压其他内容。
容易踩的坑：
- 父容器高度未显式设置，导致绝对定位元素“掉出可视区”
- 在微信内置浏览器或某些 Android WebView 中，
right: 0在缩放或横屏时计算异常 - 无障碍访问（a11y）工具可能跳过绝对定位内容，影响可访问性
只推荐用于状态徽标、关闭按钮这类小尺寸、语义上可脱离主流程的元素。
复杂点在于：同一页面可能混合多种对齐需求——比如顶部导航栏用 flex，表单字段用 block+margin，而操作按钮组又得适配折叠逻辑。这时候别硬套一种方案，按容器职责分层处理更可靠。
