如何实现列表项右对齐且独占一行，hover仅触发于文字区域？

要达成需求，核心是让列表项（<li>）既保持独占一行，又宽度贴合内容，同时自动右对齐。可以通过以下修改实现：

给.selects ul li添加width: fit-content;和margin-left: auto;，同时给父容器.selects设置宽度适配内容，具体代码如下：

<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;
        width: fit-content; /* 确保容器宽度适配内部列表 */
    }

    .selects ul {
        list-style-type: none;
    }

    .selects ul li {
        vertical-align: bottom;
        width: fit-content; /* 宽度贴合文字内容 */
        margin-left: auto; /* 自动左外边距，将列表项推至右侧 */
        transition: color 0.5s;
    }

    .selects ul li:hover {
        color: #ae2e2e;
        cursor: pointer;
    }
</style>

关键逻辑说明： #

1. width: fit-content;：让<li>的宽度刚好包裹文字，避免占满父容器宽度，确保hover仅触发在文字区域
2. margin-left: auto;：利用块级元素的自动外边距特性，将<li>整体向右对齐，实现文字右对齐的视觉效果
3. .selects设置width: fit-content;：避免容器占满页面宽度，保证列表项的右对齐逻辑正确生效

之前方案的问题分析： #

• 方案1：移除width: fit-content;后，<li>作为块级元素会占满父容器宽度，导致hover触发整个行区域，而非仅文字部分
• 方案2：使用float: right;会让<li>脱离正常文档流，变成行内块元素，破坏了列表项独占一行的布局，导致内容挤在同一行

内容的提问来源于stack exchange，提问作者StackedAndOverflowed