如何摆脱菜单右侧的额外空间

Question

我创建了简单的水平菜单，并在每个LI内部提供相等的左右填充，但是在版本中，它在最后一个li之后留下了额外的空间或者下到下一行。

我花了3个小时让它与浏览器兼容，但最终却失败了。当我在最后一个LI上放置额外的填充来调整空间时它在firefox中很好用，但在ie中显示出不需要的空间。 我想让它跨浏览器兼容而不使用黑客。

下面是代码：

<section class="topContent">
    <nav>
        <ul>
            <li><a href="javascript:;">home</a>
            </li>
            <li><a href="javascript:;">earthmoving</a>
            </li>
            <li><a href="javascript:;">attachments</a>
            </li>
            <li><a href="javascript:;">power systems</a>
            </li>
            <li><a href="javascript:;">truck tailer</a>
            </li>
            <li><a href="javascript:;">ag equipment</a>
            </li>
        </ul>
    </nav>
    <!--/nav-->
</section>

.topContent{ width:940px; margin:0 auto;}
.topContent nav{ background:#ffce12; height:42px;}
.topContent nav ul{ padding:0; margin:0;}
.topContent nav li{ float:left; list-style:none;}
.topContent nav li a{ font:14px/42px Arial, Helvetica, sans-serif; color:#000; padding:0 40px; text-transform:capitalize; display:block;}
.topContent nav li a:hover, .topContent nav li a.active{ background:#464646 url(../images/hover-arrow.jpg) no-repeat center 0; display:block; color:#fff;}

Answer 1

您的“设计公司”CSS根本没有对齐/展开项目，您只需调整填充值以使其在一个浏览器上运行。

解决它的一种方法是to justify the nav items，或者如果你对动态内容不感兴趣（即导航项目标题不会长时间改变），你可以明确地设置元素宽度和中心他们的文字。

Answer 2

问题基于菜单的宽度。我相信，因为文本在每个浏览器甚至操作系统中略有不同，所以你不会得到这么完美。如果菜单不是动态的，您可以尝试单独调整宽度/填充。或者，您可以将菜单宽度的宽度除以链接数。如果某些物品太长，可能看起来有点奇怪。如果这样做，请确保将文本对齐在中心。

nav a {
    padding: 0; /*just need to remove the padding*/
    width: 156.6px; /*940 / 7 (the amount of links)*/
    text-align:center; 
}