我尝试在网页右下角对齐一些列表项，每个列表项的文本都是右对齐的，每个列表项的宽度都适合内容，这样它只会在实际单词上激活悬停效果。但我无法达到我想要的效果。

**我认为可以解决这个问题：**如果我从列表项中删除width: fit-content;字段，然后添加text-align: right;，它在视觉上看起来是正确的。但是，它会在列表项宽度的任何地方激活悬停效果。此外，如果我尝试将float: 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;
    }

    .selects ul li {
        vertical-align: bottom;
        /* 
        This is the field I thought would fix it.
        width: fit-content;
        */
        transition: color 0.5s;
        text-align: right;
    }

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

我尝试实现以下代码：

.selects ul li {
    vertical-align: bottom;
    width: fit-content; /* This */
    float: right; /* And this */
    transition: color 0.5s;
}

然而，“我”和“关于”列表项随后组合在同一行上。