<li>如何将导航栏中的最后一项设置为右侧

<style>
    .navbar {
        overflow: hidden;
    }

    .navbar li {
        float: left;
    }

    .navbar li:last-child {
        float: right;
    }
</style>

<ul class="navbar">
    <li>首页</li>
    <li>产品</li>
    <li>关于我们</li>
    <li>联系我们</li>
    <li>登录</li>
</ul>

<style>
    .navbar {
        display: flex;
        justify-content: flex-start;
        list-style-type: none;
        padding: 0;
    }

    .navbar li:last-child {
        margin-left: auto;
    }
</style>

<ul class="navbar">
    <li>首页</li>
    <li>产品</li>
    <li>关于我们</li>
    <li>联系我们</li>
    <li>登录</li>
</ul>

<style>
    .navbar {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        list-style-type: none;
        padding: 0;
    }

    .navbar li:last-child {
        grid-column-start: -1;
    }
</style>

<ul class="navbar">
    <li>首页</li>
    <li>产品</li>
    <li>关于我们</li>
    <li>联系我们</li>
    <li>登录</li>
</ul>