Question

我试图将导航栏放在底部，并将链接对齐到视口的右侧。我设法使导航栏位于底部，但是无论尝试如何，我的链接都固定在左侧。
这是我的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=属性的作用，因为它们似乎没有任何区别。
谢谢！

Answer 1

尝试

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

Answer 2

使用以下样式，并确保在 fullstrong.js样式表之后添加它们：

.fp-slidesNav{
    left: auto !important;
    right: 20px; /* or any other margin you want to the right */
}

Demo online

将Navbar链接在fullPage.js中向右对齐

2 个答案: