本文介绍使用 flexbox 解决列表项右对齐、内容自适应宽度与独立行布局三者兼容的问题，避免 `float: right` 导致的换行失效，确保 hover 效果仅作用于文字区域。
在网页布局中，将导航类列表（如页脚或侧边栏菜单）右对齐并保持每项独占一行，同时让悬停（:hover）响应区域严格匹配文字宽度，是一个常见但易出错的需求。直接使用 text-align: right 会使
正确解法是结合 display: flex 与 flex-direction: column：将
- 设为垂直方向的弹性容器，并通过 align-items: flex-end 实现子项整体右对齐；再为每个
- 显式设置 width: fit-content，使其宽度严格包裹文字内容。这样既保留了逐行排列的语义结构，又实现了视觉右对齐与交互精准性。
以下是完整、可直接运行的实现代码：
- ABOUT
- ME
- CONTACT
✅ 关键要点说明：
- fit-content 是现代浏览器广泛支持的值（Chrome 63+、Firefox 66+、Safari 14.1+），若需兼容旧版 Safari，可用 width: -webkit-fit-content 作为前缀补充；
- 不要对
- 使用 float 或 inline-block，它们会干扰 Flex 子项的默认行为；
- align-items: flex-end 作用于容器，控制所有子项的横向对齐，比单个设置 margin-left: auto 更简洁可靠；
- 若需调整列表项间距，推荐使用 gap: 0.5em（在 .selects ul 上设置），而非 margin-bottom，以避免最后一个元素多余空白。
该方案语义清晰、样式解耦、响应精准，是现代 CSS 布局中处理此类需求的推荐实践。
