个人中心
gpt4 book ai didi

jquery - 在 fullPage.js 中将导航栏链接右对齐

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

我试图让我的导航栏位于底部，链接与视口(viewport)的右侧对齐。我设法让导航栏位于底部，但无论我尝试什么，我的链接都卡在左边。
这是我的 HTML 代码:

<body>
  <nav class="nav" id="myMenu">
    <a data-menuanchor="sec1"  class="nav-link"  href="#sec1">Section 1</a>
    <a data-menuanchor="sec2" class="nav-link"  href="#sec2">Section 2</a>
  </nav>
  <div id="fullpage">
    <div class="section" id="secc1" >Section 1</div>
    <div class="section" id="secc2" >
      <div class="slide">Slide 1</div>
      <div class="slide"> Slide 2 </div>
      <div class="slide"> Slide 3 </div>
      <div class="slide"> Slide 4 </div>
    </div>
  </div>
</body>

这是我的 JQuery 代码:

<script>
  $(document).ready(function() {
    $('#fullpage').fullpage({
      menu:'#myMenu',
      anchors: ['sec1', 'sec2'],
      sectionsColor: ['#fc6c7c', '#69a366'],
      scrollingSpeed: 1000,
      fixedElements: "#myMenu",

    });

  });
</script>

最后是 CSS 代码:

<style>
  #myMenu{
    width: 100%;
    bottom:0px; 
    position:absolute;

  }

  .section{
    text-align: center;
  }

  .nav-link{
    color:white;
    position: relative;
    right: 0px;

  }

  .nav-link:hover{
    color:red;

  }

</style>

而且，作为附带问题 - 如果有人能解释一下 menu: 函数和
data-menuanchor= 属性的作用，我会很高兴，因为它似乎它们都没有任何区别。
谢谢!

最佳答案

尝试

.nav-link {
  color:white;
  position: relative;
  text-align: right;
}

关于jquery - 在 fullPage.js 中将导航栏链接右对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54719726/

25 4 0
文章推荐： javascript - 将文本放在拖放区域下方
文章推荐： ios - 从 SceneKit 检测 SpriteKit 按钮按下覆盖
文章推荐： javascript - 显示警报消息并重定向页面
文章推荐： css - 无法为 IE 修复 CSS - 帮助？