<hr />对齐应使用margin替代已废弃的align属性：左对齐用margin-left: 0; margin-right: auto;，右对齐用margin-left: auto; margin-right: 0;，居中用margin: 0 auto;，且width必须显式设置。
hr标签align="left"或align="right"怎么用margin替代
直接写align="left"或align="right"在<hr>上已无效，浏览器不再解析。它原本依赖width小于100%才生效，现在必须靠margin手动“推”位置。
核心逻辑是：把<hr>设为块级（默认就是），再用margin控制左右空白：
-
<hr style="width: 50%; margin-left: 0; margin-right: auto;">→ 左对齐（右边撑满） -
<hr style="width: 50%; margin-left: auto; margin-right: 0;">→ 右对齐（左边撑满） -
<hr style="width: 50%; margin: 0 auto;">→ 居中（左右均分剩余空间）
注意：width必须显式设置，否则margin: auto无基准可算，会退化成100%宽度+无偏移。
为什么text-align对hr无效
text-align只作用于**行内内容在块容器内的水平分布**，而<hr>是块级元素，不是容器。给<hr>本身设text-align: right完全没效果——W3C规范明确不支持。
立即学习“前端免费学习笔记（深入）”；
常见误操作：<div style="text-align: right"><hr></div>。这看似让<hr>右移，其实是靠<div>的文本对齐规则“影响”了<hr>的**行内显示行为**（旧版渲染兼容），但现代浏览器中不可靠，尤其当<div>设了display: flex或overflow: hidden时，<hr>直接回到左对齐。
响应式场景下margin方案的坑
固定width + margin在小屏容易溢出或错位。别硬写width: 200px，改用相对单位：
- 用
width: 80%配合max-width: 600px，再配margin: 0 auto保居中 - 右对齐需求？
width: 60%; margin-left: auto; margin-right: 0;，但要确认父容器没设padding-right挤压空间 - 避免
float：虽然float: right能让<hr>右贴边，但它脱离文档流，后续元素会上浮，必须加clear: both——比margin多一步且难维护
真正麻烦的是“右对齐但末尾留白”，比如<hr>离右边距24px。这时不能只靠margin-right: 24px，得结合width: calc(100% - 24px)，否则宽度超限会换行或溢出。
要不要用Flex布局替代margin
可以，但没必要。给<hr>父容器设display: flex，再用justify-content: flex-end实现右对齐，确实简洁。但要注意两点：
-
<hr>在flex容器里默认是flex: 0 0 auto，不会拉伸，没问题 - 如果父容器还包含其他块级元素（如
<p>），它们也会被纳入flex流，可能意外改变原有垂直间距——这是纯margin方案没有的副作用
结论：单个<hr>对齐，优先用margin；若整个区域本就用flex布局，顺手加justify-content更省事。别为了一个<hr>专门套一层flex容器。
