垂直列表右对齐及悬停效果实现教程

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

关键思路是：将

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

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

  <div class="main">
    <div class="selects">
      <ul>
        <li>ABOUT</li>
        <li>ME</li>
        <li>CONTACT</li>
      </ul>
    </div>
  </div>

  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（<14.1），可用 width: -webkit-fit-content 作为前缀补充；
  • 避免在 .selects ul li 上同时使用 float 和 flex 属性——二者逻辑冲突，float 会被 Flex 容器自动忽略；
  • 如需增加项间间距，推荐使用 gap: 0.5em（作用于
    ），而非 margin-bottom（易引发外边距合并问题）。

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

    今天关于《垂直列表右对齐及悬停效果实现教程》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！

    您即将跳转至第三方网站，请注意保护好个人信息和财产安全！

    继续访问