Html 宽屏显示器上的水平菜单显示不正确

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

客户端在Windows7上使用InternetExplorer8，我在一个正常大小的显示器上测试了这个浏览器和操作系统，它似乎可以工作。问题似乎出在宽屏上

下面是页面在我的屏幕上的外观，以及我测试过的每个后续屏幕的外观

这是我的菜单代码

HTML

<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>

---

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

尝试减少.nav项、.nav和.menu中的一些宽度

---

如果这对您没有帮助，那么您可以提供该链接所在的位置。这样我们就可以查看并快速回复您。

我建议您使用宽度标签

删除“导航”中的那个怎么样

很抱歉，这不是一个可以问的问题。这个问题很容易解决，如果你想改变现状，你可以自己解决

关于这个问题，我最好的建议是，您可以使用一个合适的工具来“测试”CSS，并看到“实时”的结果。

---

我对Firefox/Chrome FireBug扩展很满意（但它不能保存结果，您必须复制并粘贴它）。

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

，它看起来与IE8中带有“更大”文本的客户端截图一模一样

现在您可以重现问题，您应该能够修复它

我会提供更好的说明，但如果不能看到整个网站，就很难做到这一点

“宽屏监视器”部分不相关-您正在最外层容器（

.menu

）上声明

宽度：960px

）。无论屏幕宽度是多少，它都将是

960px

。

试试这个 .导航项目{ 字号：2em； 左侧边缘：5em； }

诚然，如果chrome（用户的浏览器）将文本大小增加过多，无论使用ems最终会出现什么问题，因为它们当然是基于文本大小的

一般来说，它的最佳实践是使用百分比表示文本大小，并使用像素表示边距/填充/距离，以实现浏览器之间的最佳一致性

另外，使用重置css（如YUI base reset fonts.css）也是一个好主意

---

如果你仔细阅读了这个问题，你会注意到它实际上适用于我所做的所有测试，除了客户端的宽屏显示器。我没有访问此监视器的权限，因此我想知道是否有一个明确的答案来回答这个问题，而不需要我去我的客户办公室并在那里工作！我建议您发布一个代码的实例，以便使用宽屏显示器和IE8的人可以自己查看。这就是说，尽管没有合适的显示器，您还是可以通过一种方法来测试这一点：您是否尝试过使用CSS将

html

标记的宽度设置为

1280px

（或其他宽屏尺寸）？如果你这样做，将有水平滚动条，但内容的布局和显示方式应与宽屏相同。这是一个聪明的想法，我将尝试一下。谢谢你的回答，我已经成功地重现了错误，这非常棒，对我来说已经足够好了，因为我现在可以自己解决这个问题。我将在未来的发展中牢记这一点。再次感谢。

.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;
}