html - 水平菜单在宽屏显示器上显示不正确

Question

我为网站实现的水平菜单有一个小问题。该菜单仅包含三个元素，但在相当大的宽屏显示器上查看时，最后一个元素似乎折叠到一个新行上。由于我的客户使用的是宽屏显示器，因此我无法亲自对此进行测试，虽然我无法重现错误，但他们已向我发送了此屏幕截图。

客户端在 Windows 7 上使用 Internet Explorer 8，我已经在正常尺寸的显示器上测试了该浏览器和操作系统，似乎可以正常工作。问题似乎出在宽屏上。

这是页面在我的屏幕上以及我测试过的所有其他后续屏幕上的样子。

这是我的菜单代码。

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>

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

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

如果这对您没有帮助，那么您能否提供托管它的链接。以便我们检查并快速回复您。