Javascript 导航栏-选项卡定位

如何使“登录”位于屏幕最右侧？我还想做一个单独的头文件。但是，正如您所看到的，我使用id=“open”以使open选项卡的样式不同，这将是令人惊讶的。我希望不使用JavaScript，但通过研究，我认为这是我唯一的选择

<div> 
    <div class="w3-bar tablink">
        <a class="tablink w3-bar-item w3-button" style="text-decoration:none" id="open" href="index.php">Home</a>
        <a class="tablink w3-bar-item w3-button" style="text-decoration:none" href='matchday.php'>Matchday</a>
        <a class="tablink w3-bar-item w3-button" style="text-decoration:none" href='news.php'>News Page</a>
        <a class="tablink w3-bar-item w3-button" style="text-decoration:none" href='stats.php'>Stats</a>
        <a class="tablink w3-bar-item w3-button" style="text-decoration:none" href='gallery.php'>Gallery</a>
        <a class="tablink w3-bar-item w3-button" style="text-decoration:none" href='forum.php'>Forum</a>
        <a class="tablink w3-bar-item w3-button" style="text-decoration:none" href='more.php'>More...</a>
        <a class="tablink w3-bar-item w3-button" style="text-decoration:none" href='login.php'>Login</a></div>
</div>

添加以下内容：

<div class="w3-bar tablink" style="float:right">

---

在包装div上使用flexbox，在最后一个链接上使用

左边距：auto

.tablink{
显示器：flex；
}
最后一个孩子{
左边距：自动；
}

---

工作示例：

此解决方案将使选项卡以与原始html标记相反的顺序显示。Flexbox是一种更新的方法，处理效果更好。您好，谢谢！工作很愉快。你知道我怎么把它缩进，使它远离页边吗？

<div> 
    <div class="w3-bar tablink">
        <a class="tablink w3-bar-item w3-button" style="text-decoration:none" id="open" href="index.php">Home</a>
        <a class="tablink w3-bar-item w3-button" style="text-decoration:none" href='matchday.php'>Matchday</a>
        <a class="tablink w3-bar-item w3-button" style="text-decoration:none" href='news.php'>News Page</a>
        <a class="tablink w3-bar-item w3-button" style="text-decoration:none" href='stats.php'>Stats</a>
        <a class="tablink w3-bar-item w3-button" style="text-decoration:none" href='gallery.php'>Gallery</a>
        <a class="tablink w3-bar-item w3-button" style="text-decoration:none" href='forum.php'>Forum</a>
        <a class="tablink w3-bar-item w3-button" style="text-decoration:none" href='more.php'>More...</a>
        <a class="tablink w3-bar-item w3-button" style="text-decoration:none; float:right" href='login.php'>Login</a></div>
</div>