如何在保持垂直排列的前提下实现右对齐列表项并精准触发悬停效果

根本症结在于：传统块级流式布局缺乏对“单列、右对齐、内容自适应宽”三者的同时控制能力。此时，CSS Flexbox 是最简洁、语义清晰且浏览器兼容性良好的解决方案。

关键思路是：将

设为 Flex 容器，通过 flex-direction: column 保持垂直流向，再用 align-items: flex-end 统一将所有子项（即
• ）沿交叉轴（此处为水平方向）右对齐。每个
• 保留 width: fit-content，使其宽度严格包裹文字内容，从而确保 :hover 效果仅在鼠标真正悬停于文字区域时激活。

  以下是优化后的完整代码（已移除冗余重置，增强可维护性）：

  

  01Agent

  多平台AI图文创作智能体

  下载

  
    
  
      
  
        
  ABOUT
        
  ME
        
  CONTACT
      
    
  

  html, body {
    height: 100%;
    margin: 0;
  }
  
  .main {
    font-size: 10vw;
    width: 90%;
    margin-left: 5%;
    position: absolute;
    bottom: 0;
  }
  
  .selects {
    position: absolute;
    bottom: 20px;
    right: 0;
  }
  
  .selects ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;          /* 启用 Flex 布局 */
    flex-direction: column; /* 垂直排列子项 */
    align-items: flex-end;  /* 所有子项右对齐 */
  }
  
  .selects ul li {
    margin: 0;
    padding: 0;
    transition: color 0.5s ease;
    text-align: right;      /* 文字内部右对齐（辅助视觉一致性） */
    width: fit-content;     /* 关键：宽度仅包裹内容，避免悬停区域溢出 */
    cursor: pointer;
  }
  
  .selects ul li:hover {
    color: #ae2e2e;
  }

  ✅ 效果验证：

  • 每个列表项独占一行，顺序从上到下；
  • 所有文字右边缘严格对齐于容器最右边界；
  • 鼠标仅在“ABOUT”“ME”“CONTACT”文字范围内移动时才触发变色，空白区域无响应。

  ⚠️ 注意事项：

  • fit-content 在现代浏览器（Chrome 68+、Firefox 63+、Safari 14.1+）中稳定支持；若需兼容旧版 Safari（
  • 避免在 .selects ul li 上同时使用 float 和 flex 属性——二者逻辑冲突，float 会被 Flex 容器自动忽略；
  • 如需增加项间间距，推荐使用 gap: 0.5em（作用于
    ），而非 margin-bottom（易引发外边距合并问题）。

  该方案以声明式方式精准表达设计意图，既规避了浮动布局的历史包袱，又无需 JavaScript 干预，是响应式右对齐列表的推荐实践。