本文讲解如何使用 flexbox 实现列表项右对齐、内容自适应宽度、逐行垂直堆叠，同时确保 hover 效果仅作用于文字区域而非整行空白。

在网页布局中，将导航类列表（如页脚或侧边菜单）右对齐到底部时，常遇到两个矛盾需求：既要每项独占一行、从下往上依次排列，又要让每项宽度紧贴文字内容（fit-content），从而避免悬停区域过大、误触发交互。传统方案如 float: right 会破坏块级流导致列表项横向挤在一起；而仅设 text-align: right 又会使

默认撑满父容器宽度，导致鼠标移入空白区也触发 :hover。

正确解法是结合 Flexbox 布局与内容自适应尺寸：

• 将
  设为 display: flex 并设置 flex-direction: column，使其子元素（即
  • ）沿垂直方向堆叠；
  • 使用 align-items: flex-end 让所有列表项整体右对齐（注意：这是容器级对齐，不影响单个
  • 内部文本）；
  • 每个
  • 保留 width: fit-content，使其宽度严格包裹文字内容，hover 区域自然收缩至文字本身；
  • text-align: right 仍可保留，用于控制多行文本内部对齐（本例单行虽非必需，但具良好兼容性与语义）。

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

  <div class="main">
    <div class="selects">
      <ul>
        <li>ABOUT</li>
        <li>ME</li>
        <li>CONTACT</li>
      </ul>
    </div>
  </div>
  
  <style>
    html, body {
      height: 100%;
    }
  
    html, body, .selects, .selects ul, .selects ul li {
      margin: 0;
      padding: 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;
      display: flex;           /* 启用 Flex 布局 */
      flex-direction: column;  /* 垂直排列子项 */
      align-items: flex-end;   /* 整体右对齐 */
    }
  
    .selects ul li {
      vertical-align: bottom;
      width: fit-content;      /* 关键：宽度仅包裹内容 */
      text-align: right;       /* 文字右对齐（增强可读性） */
      transition: color 0.5s;
    }
  
    .selects ul li:hover {
      color: #ae2e2e;
      cursor: pointer;
    }
  </style>

  ✅ 效果验证：

  • 列表项严格按源码顺序从下到上垂直排列（ABOUT 在最下方，CONTACT 在最上方）；
  • 每项宽度等于其文字宽度（如 "ME" 最窄，"CONTACT" 最宽），悬停仅在文字上生效；
  • 鼠标移入任意空白区域（如
  • 右侧或下方）无响应，交互精准可控。

  ⚠️ 注意事项：

  • fit-content 在现代浏览器中支持良好，但若需兼容 IE 或旧版 Safari，可改用 display: inline-block + text-align: right 于父容器，不过会增加额外布局复杂度；
  • 避免在
    上同时使用 float 或 inline-block，这会与 Flexbox 冲突；
  • 若后续需添加图标或伪元素，建议通过 ::before/::after 并配合 margin-left（对右对齐项）进行微调，以维持视觉一致性。

  该方案简洁、语义清晰、响应精准，是现代 CSS 布局中处理「右对齐+内容自适应+垂直流」场景的标准实践。