Jquery 在fullPage.js中将导航栏链接向右对齐_Jquery_Css_Fullpage.js

Jquery 在fullPage.js中将导航栏链接向右对齐

jquery css

Jquery 在fullPage.js中将导航栏链接向右对齐,jquery,css,fullpage.js,Jquery,Css,Fullpage.js,我试图让导航栏位于底部，链接与视口右侧对齐。我设法把导航条放在了底部，但不管我怎么做，我的链接都被粘在了左边。这是我的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

我试图让导航栏位于底部，链接与视口右侧对齐。我设法把导航条放在了底部，但不管我怎么做，我的链接都被粘在了左边。
这是我的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>


第一节
幻灯片1
幻灯片2
幻灯片3
幻灯片4

这是我的JQuery代码：

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

    });

  });
</script>


$（文档）.ready（函数（）{
$（“#全页”）。全页({
菜单：“#我的菜单”，
主播：['sec1'，'sec2']，
章节颜色：['#fc6c7c'，'#69a366']，
滚动速度：1000，
固定元素：“#我的菜单”，
});
});

最后，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>


#我的菜单{
宽度：100%；
底部：0px；
位置：绝对位置；
}
.科{
文本对齐：居中；
}
.导航链路{
颜色：白色；
位置：相对位置；
右：0px；
}
.导航链接：悬停{
颜色：红色；
}

另外，作为一个附带问题，我希望有人能解释一下

菜单：

函数和

data menuanchor=

属性都有什么作用，因为它们似乎都没有什么区别。
谢谢大家!

试试看

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

使用这些样式，并确保在fullpage.js样式表之后添加它们：

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

谢谢@Vishal Bhavsar。不幸的是，它似乎不起作用。尝试文本对齐：右对齐；在上面的导航链接css中，我刚刚发现了问题所在：它与Bootstrap的

nav

类有关。应该是

谢谢你的帮助！谢谢阿尔瓦罗！我询问了nav链接项目，但由于您提出了这些样式，我试图在GitHub页面上查找它们，但不知怎么的，没有找到它们。是否有所有现有可用类的列表（如

.fp xyz

），我不明白你们的意思。这是fullPage.js用于导航项目符号的类。这就是为什么您必须使用它来覆盖它们的默认值。您可以通过使用Chrome inspector、Safari或Firefox检查DOM来确定它们使用了哪些类或id。是否有fullPage.js中存在的所有其他类的列表？谢谢