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

2023-12-28

我为网站实现的水平菜单有一个小问题。该菜单仅包含三个项目,但在相当大的宽屏显示器上查看时,最后一个项目似乎折叠到一个新行。我实际上无法自己测试这一点,因为我的客户使用宽屏显示器,虽然我无法重现他们向我发送的此屏幕截图的错误。

客户端在 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;
}

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


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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

水平菜单在宽屏显示器上显示不正确 的相关文章