水平菜单在宽屏幕监视器上显示不正确

Question

我有一个小问题的横向菜单，我已经实现了一个网站。该菜单只包含三项，但当在相当大的宽屏显示器上查看时，最后一项似乎会折叠到新的行上。我无法亲自测试这一点，因为宽屏显示器是由我的客户使用，虽然我不能重现错误，他们已经发送给我这个屏幕截图。

​

​

客户端在Windows 7上使用8，我已经在正常大小的监视器上测试了这个浏览器和操作系统。问题就在宽屏上。

下面是页面在我的屏幕上的外观，以及我测试过的所有其他后续屏幕。

​

​

这是菜单的代码。

<div class="menu">
    <ul class="nav">
        <li class="nav-item" id="first-item"><a href="/why-us.php">WHY US</a></li>
        <li class="nav-item"><a href="/links.php">LINKS</a></li>
        <li class="nav-item"><a href="/contact.php">CONTACT</a></li>
    </ul>
</div>

CSS

.nav-item {
    font-size:2em;
    margin-left:175px;
}

.nav-item a {
    color:#2B2F73;
}

.nav {
    list-style-type:none;
    padding:0;
    margin:auto;
    width:744px;
}

.nav li {
    list-style-type:none;
    float:left;
    display:inline;
}

#first-item {
    margin-left:0px !important;
}

.menu {
    width:960px;
    height:40px;
    margin:auto;
}

有人能识别出我代码中可能产生此错误的任何明显错误吗？

Answer 1

问题是，他们的“文本大小”设置为“更大”(或者可能是“最大的”)：

​

​

你的代码在这里，它看起来就像IE8中“更大”文本的客户截图。

现在你可以重现这个问题了，你应该能够解决它。

我会提供更好的指导，但如果不能够看到整个站点，就很难做到这一点。

“宽屏监视器”部分与此无关--您是在最外层的容器(.menu)上声明.menu。无论屏幕宽度是多少，它都将是960px。

Answer 2

尝试减少. .nav item、.nav和.menu中的宽度

如果这对您没有帮助，那么请您提供这个托管的链接。这样我们就可以查一下，并迅速回复你。

Answer 3

尝试以下..nav项{字体大小:2EM；边距:5em；}

当然，如果chrome (用户的浏览器)过多地增加了它们的文本大小，那么如果您使用ems (当然是基于文本大小)，那么它最终会中断。

一般来说，<subjective>的最佳做法是使用百分比表示文本大小，并使用像素作为页边距/填充/距离，以实现浏览器之间的最佳一致性。

另外，使用重置css (比如YUI base- reset fonts.css)也是一个好主意，</subjective>。