如何摆脱菜单右侧的多余空间答案

【问题标题】：how to get rid from extra space on the right of the menu如何摆脱菜单右侧的多余空间
【发布时间】：2012-10-24 17:48:02
【问题描述】：

我已经创建了简单的水平菜单，并在每个 LI 内提供了相等的左右填充，但在 ie 版本中，它在最后一个 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;}

【问题讨论】：

你有几个代码问题。首先通过 W3C 验证器运行它，更正它们，然后返回。
使用浏览器调试器工具，即：Firefox 中的 FireBug 和其他浏览器中的类似工具（通常是 F12 默认键），您可以单击一个元素并调查它的样式以及 CSS 的哪一部分做了什么。这通常可以帮助您快速确定为什么您有一个您不想要的空间，或者要更改什么以在您想要的位置添加空间。调试器工具甚至可以让您直接更改样式以检查即时结果。
相信这是字母间距的问题，因为不同的浏览器呈现不同的字母间距，即使我玩过字母间距但它确实有效
使用 css 重置来标准化字体跨浏览器等内容

标签： javascript jquery css html

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您的“设计公司”CSS 根本没有对齐/分隔项目，您只是调整了填充值以使其在一个浏览器上工作。

解决它的一种方法是to justify the nav items，或者如果您对动态内容不感兴趣（即导航项目标题长时间不会更改），您可以明确设置元素宽度并将其文本居中.

【讨论】：