html元素对齐无通用属性，须依类型和布局上下文分别处理：text-align仅影响行内内容；块级元素需用margin或flex/grid；表单元素需flex+align-items统一基线；列表右对齐应避免text-align而用flex-direction:column+align-items:flex-end。
HTML 标签元素排列对齐没有“通用对齐属性”，必须按元素类型、文档流角色和布局上下文分别处理。 直接在 <div> 或 <code><span></span> 上加 align 属性已失效，现代方案依赖 CSS 的盒模型控制逻辑，而非 HTML 语义属性。
text-align 只作用于行内内容，对块级子元素无效
很多人误以为给父容器设 text-align: right 就能让所有子元素右对齐。其实它只影响：
- 纯文本、
<span></span>、<img>（默认display: inline）等行内级内容的水平对齐位置 - 块级子元素（如
<p></p>、<div>）完全不受影响——它们仍按正常文档流占据整行 <p>若想让块级子元素整体右移，得用 <code>margin-left: auto（需显式设置宽度）或改用 Flex/Grid 布局。块级元素水平对齐必须控制 margin 或切换布局模型
对单个块级元素（如
<div class="card">）实现居中或右对齐，有且仅有以下可靠方式： <ul> <li>设固定宽度 + <code>margin-left: auto; margin-right: 0;→ 右对齐（注意：不能只写margin-left: auto，否则左右都为 auto 会居中） - 设
display: flex父容器 + 子项margin-left: auto→ 不需指定子项宽度，更灵活 - 避免用
float: right：它会让元素脱离文档流，后续兄弟元素会上升填补空位，极易引发布局塌陷
例如：
.container { display: flex; }
.box { width: 200px; margin-left: auto; } 这比 float 更可控，也无需清除浮动。
表单元素对齐要统一基线，不能只靠 text-align
<label></label>、<input type="text">、<select></select> 默认基线不一致，单纯设 text-align: right 会导致视觉错位。
- 正确做法是把整个表单区域设为
display: flex; align-items: center;，再用justify-content控制标签与输入框的相对位置 - 若需标签右对齐、输入框左对齐（常见于右到左语言界面），用
flex-direction: row-reverse比手动调margin更健壮 - checkbox / radio 要对齐文字，必须显式设
vertical-align: top或middle，否则浏览器按默认基线渲染，高度差异明显
垂直堆叠列表项右对齐时 hover 区域易失控
用 text-align: right 给 <ul></ul> 设右对齐，每个 <li> 仍占满父宽，导致空白区域也能触发 :hover。
- 解法是设
<ul></ul>为display: flex; flex-direction: column; align-items: flex-end; - 再给每个
<li>加width: fit-content;—— 这样 hover 只响应文字实际覆盖区域 - 不推荐
float: right：它会让所有<li>挤成一行，破坏垂直堆叠语义
这个细节常被忽略：对齐不只是视觉位置，还决定交互边界是否合理。
