HTML5视频怎么靠右不换行_新手入门inlineblock技巧【技巧】-html教程

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 会让元素脱离文档流，后续内容会环绕它，而且在弹性布局或响应式场景中极易引发高度塌陷、错位、移动端适配失败等问题。