导航栏 - 标签定位

Question

如何才能使“登录”位于屏幕的最右侧？我还想制作一个单独的头文件。但是，你可以看到我使用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>

Answer 1

在包装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>

Answer 2

添加这个：

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

Answer 3

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

工作示例：https://jsfiddle.net/gugui3z24/wnbbzhwL/1/