本文介绍使用 flexbox 解决列表项右对齐、内容自适应宽度与独立行布局三者兼容的问题，避免 `float: right` 导致的换行失效，确保 hover 效果仅作用于文字区域。

在网页布局中，将导航类列表（如页脚或侧边栏菜单）右对齐并保持每项独占一行，同时让悬停（:hover）响应区域严格匹配文字宽度，是一个常见但易出错的需求。直接使用 text-align: right 会使

元素继承父容器宽度（通常为 100%），导致空白区域也能触发 hover；而尝试 float: right 虽能收缩宽度，却会破坏默认的块级流式布局，使所有

挤在同一行。

正确解法是结合 display: flex 与 flex-direction: column：将

设为垂直方向的弹性容器，并通过 align-items: flex-end 实现子项整体右对齐；再为每个
• 显式设置 width: fit-content，使其宽度严格包裹文字内容。这样既保留了逐行排列的语义结构，又实现了视觉右对齐与交互精准性。

  以下是完整、可直接运行的实现代码：

  <div class="main">
    <div class="selects">
      <ul>
        <li>ABOUT</li>
        <li>ME</li>
        <li>CONTACT</li>
      </ul>
    </div>
  </div>
  
  <style>
    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-type: none;
      margin: 0;
      padding: 0;
      display: flex;          /* 启用 Flex 布局 */
      flex-direction: column; /* 垂直堆叠子项 */
      align-items: flex-end;  /* 所有子项右对齐 */
    }
  
    .selects ul li {
      margin: 0;
      padding: 0;
      vertical-align: bottom;
      width: fit-content;     /* 宽度紧贴文字内容 */
      transition: color 0.5s ease;
      text-align: right;      /* 文字内部右对齐（增强可读性） */
      cursor: pointer;
    }
  
    .selects ul li:hover {
      color: #ae2e2e;
    }
  </style>

  ✅ 关键要点说明：

  • 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 布局中处理此类需求的推荐实践。