本文讲解如何使用 flexbox 实现列表项右对齐、内容自适应宽度、逐行垂直堆叠，同时确保 hover 效果仅作用于文字区域而非整行空白。
在网页布局中，将导航类列表（如页脚或侧边菜单）右对齐到底部时，常遇到两个矛盾需求：既要每项独占一行、从下往上依次排列，又要让每项宽度紧贴文字内容（fit-content），从而避免悬停区域过大、误触发交互。传统方案如 Float: right 会破坏块级流导致列表项横向挤在一起；而仅设 text-align: right 又会使
正确解法是结合 Flexbox 布局与内容自适应尺寸：
- 将
- 设为 display: flex 并设置 flex-direction: column，使其子元素（即
- ）沿垂直方向堆叠；
- 使用 align-items: flex-end 让所有列表项整体右对齐（注意：这是容器级对齐，不影响单个
- 内部文本）；
- 每个
- 保留 width: fit-content，使其宽度严格包裹文字内容，hover 区域自然收缩至文字本身；
- text-align: right 仍可保留，用于控制多行文本内部对齐（本例单行虽非必需，但具良好兼容性与语义）。
以下是完整、可直接运行的实现代码：
- ABOUT
- ME
- CONTACT
✅ 效果验证：
- 列表项严格按源码顺序从下到上垂直排列（ABOUT 在最下方，CONTACT 在最上方）；
- 每项宽度等于其文字宽度（如 “ME” 最窄，”CONTACT” 最宽），悬停仅在文字上生效；
- 鼠标移入任意空白区域（如
- 右侧或下方）无响应，交互精准可控。
⚠️ 注意事项：
- fit-content 在现代浏览器中支持良好，但若需兼容 IE 或旧版 safari，可改用 display: inline-block + text-align: right 于父容器，不过会增加额外布局复杂度；
- 避免在
- 上同时使用 float 或 inline-block，这会与 Flexbox 冲突；
- 若后续需添加图标或伪元素，建议通过 ::before/::after 并配合 margin-left（对右对齐项）进行微调，以维持视觉一致性。
该方案简洁、语义清晰、响应精准，是现代 CSS 布局中处理「右对齐+内容自适应+垂直流」场景的标准实践。