我有这个JSFiddle，它可以正常工作（CSS只是一个裸骨）： http://jsfiddle.net/b6w9yfq3/1/
.HTML：
<div id="navMenu" class="navMenu hidOverflow">
<ul class="brClear">
<li><a href="#portfolio" class="jumplink"><span class="navIcon"><img src="theImages/portfolio.png" /></span>Portfolio</a></li>
<li><a href="#about" class="jumplink"><span class="navIcon"><img src="theImages/about.png" /></span>About</a></li>
<li><a href="#contact" class="jumplink"><span class="navIcon"><img src="theImages/contact.png" /></span>Contact</a></li>
<li><a href="#forum" class="jumplink"><span class="navIcon"><img src="theImages/forum.png" /></span>Forum</a></li>
</ul>
</div>
另外，我该如何使菜单末尾的额外空间不存在。我最初有 5 个条目，但当我将其缩短为 4 个时，第 5 个空格仍然显示。
如何解决此问题。
这非常简单。用于Contact的图像具有 21px 的高度，其余图标的高度均为 26 px。
只需在该特定图标的底部添加 5px 的填充，或拉伸它，由您决定。
对于第 2 部分，将 li 元素的宽度从 20% 更改为 25%。
.navMenu ul li{
display: block;
float: left;
width: 25%;
}
这应该可以做到。