javascript - 导航栏-标签位置

如何使“登录”位于屏幕的最右侧？我还想制作一个单独的头文件。但是，如您所见，我使用id =“ 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上使用flexbox，在最后一个链接上使用margin-left:auto

.tablink {
  display: flex;
}

.tablink a:last-child {
  margin-left: auto;
}

<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>

关于javascript - 导航栏-标签位置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47872475/