我正在使用一个名为 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>如果去掉高度和宽度代码
高度:10px；宽度:10px；
从 jsfiddle 中的 css 中，您将看到默认设置完美对齐。虽然这很好，但我希望非事件点的大小与事件点的大小相同(更平坦/更平滑的设计)。谁能帮我这个？可以轻松完成或稍微复杂一些的事情？
谢谢!
最佳答案
这应该是修复悬停和事件状态所需的 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;
}
关于javascript - fullPage.js 垂直 slider 导航点的对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31446440/