如何将最后一个<li>放在页面的右侧？

<style>
    .right-align {
        float: right;
    }
</style>

<ul>
    <li>第一个列表项</li>
    <li>第二个列表项</li>
    <li>第三个列表项</li>
    <li class="right-align">最后一个列表项</li>
</ul>

<style>
    ul {
        display: flex;
        justify-content: flex-end;
    }
</style>

<ul>
    <li>第一个列表项</li>
    <li>第二个列表项</li>
    <li>第三个列表项</li>
    <li>最后一个列表项</li>
</ul>

<style>
    ul {
        position: relative;
    }
    
    li:last-child {
        position: absolute;
        right: 0;
    }
</style>

<ul>
    <li>第一个列表项</li>
    <li>第二个列表项</li>
    <li>第三个列表项</li>
    <li>最后一个列表项</li>
</ul>