个人中心
gpt4 book ai didi

javascript - 导航栏 - 选项卡定位

转载 作者：行者123 更新时间：2023-11-28 15:12:58 25 4
gpt4 key购买 nike

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

25 4 0
文章推荐： javascript - 想要从日期 javascript 中减去 5.30 小时
文章推荐： jquery - 过渡结束后粘糊糊的效果搞砸了
文章推荐： javascript - 检查嵌套 JSON 结构是否包含 key
文章推荐： javascript - 从 javascript 读取实时日志文件