fullPage.js 垂直滑块导航点对齐

Question

我正在使用一个名为 fullPage.js 的 jquery 插件。它似乎有据可查，但我很难找到关于导航点对齐的任何内容。当我将它们变大一点时（通过 css 修改），悬停和活动属性的对齐方式被取消了。
请参阅下面包含对齐错误的 fiddle： http://jsfiddle.net/pingo_/b1k9wt39/

我也把代码贴在了 StackExchange 上，但是没有渲染错误（圆点似乎没有变大）：

$(document).ready(function() {
  $('#fullpage').fullpage({
    css3: true,
    navigation: true,
    navigationPosition: 'right',
    keyboardScrolling: true,
    controlArrows: true
  });
});

#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span {
  background: #004e7b;
  position: absolute;
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
  border: 1px solid #004e7b;
  background: rgba(0, 0, 0, 0);
  height: 10px;
  width: 10px;
  border-radius: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://alvarotrigo.com/fullPage/jquery.fullPage.min.js"></script>
<link href="http://alvarotrigo.com/fullPage/jquery.fullPage.css" rel="stylesheet"/>

<body>
  <div id="fullpage">
    <div class="section" id="section0">
      <h2>B A N N E R</h2>

      <h3>Tagline</h3>

    </div>
    <div class="section" id="section1">
      <h2>Section 1</h2>

      <h3>Placeholder</h3>

    </div>
    <div class="section" id="section2">
      <h2>Section 2</h2>

      <h3>Placeholder</h3>

    </div>
    <div class="section" id="section3">
      <h2>Section 3</h2>

      <h3>Placeholder</h3>

    </div>
    <div class="section" id="section4">
      <h2>Section 4</h2>

      <h3>Placeholder</h3>

    </div>
  </div>
</body>

如果去掉高宽码 height: 10px; width: 10px; 从我的 css in jsfiddle，你会看到默认设置完美对齐。虽然这很好，但我希望非活动点与活动点大小相同（更多 flatter/smoother 设计）。谁能帮我这个？可以轻松完成或稍微复杂一点的事情？

谢谢！

Answer 1

这应该是您需要修复悬停和活动状态的CSS：

#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span,
#fp-nav ul li a.active span, 
.fp-slidesNav ul li a.active span, 
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
    width: 8px;
    height: 8px;
    margin: -2px 0 0 -2px;
}

http://jsfiddle.net/b1k9wt39/4/

fullPage.js 垂直滑块导航点对齐

Alignment for fullPage.js vertical slider navigation dots

javascript

jquery

css

jquery-plugins

fullpage.js