video默认inline但不响应text-align,可靠方案是父容器text-align:right+video设inline-block,或父容器用flex+justify-content:flex-end。

video 标签默认是 inline 元素,但不换行 ≠ 自动靠右
很多人试过直接给 加 style="float:right" 或 text-align:right,发现没效果——因为 text-align 只对 inline 内容起作用,而 虽然是 inline 元素,但它有固有宽高,且父容器默认不触发 BFC,导致对齐行为不可控。
真正可靠的做法是用 display: inline-block 配合父容器的 text-align: right,或者更现代的 display: flex。
用 inline-block + text-align:right 实现靠右不换行
这是兼容性最好、最贴近“新手入门”需求的方案,不需要额外包裹或 JS。
- 给
设置display: inline-block(否则它虽是 inline,但不响应text-align的对齐) - 给它的**直接父容器**(比如 )设置
text-align: right- 确保父容器宽度足够,否则
inline-block元素可能被挤到下一行(即使只一个元素)为什么 float:right 容易出问题?
float会让元素脱离文档流,后续内容会环绕它,而且在弹性布局或响应式场景中极易引发高度塌陷、错位、移动端适配失败等问题。立即学习“前端免费学习笔记(深入)”;
- 如果父容器没有清除浮动(
clear:both或overflow:hidden),高度可能变成 0 -
float不受text-align控制,也不响应 flex 或 grid 布局,后期维护成本高 - 现代项目中,
float已基本被flex和grid取代,仅用于文字环绕等极少数场景
更简洁的现代写法:flex 布局
如果只需靠右、不换行、且兼容 IE11+,
flex是更干净的选择:- 父容器设
display: flex和justify-content: flex-end - 无需改
的 display 类型,它自动成为 flex item - 加
flex-shrink: 0防止视频在窄屏下被压缩(可选)
注意:flex 默认是单行,所以“不换行”天然满足;但若父容器太窄,视频本身会溢出而非折行——这点和 inline-block 行为一致,只是控制逻辑不同。
- 确保父容器宽度足够,否则











