我有一个小问题的水平菜单,我已经实现了一个网站。该菜单仅包含三个项目,但在相当大的宽屏显示器上查看时,最后一个项目似乎会折叠成一个新行。我无法亲自测试这个,因为我的客户使用的是宽屏显示器,虽然我无法重现他们发给我的这个屏幕截图中的错误。
客户端在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;
}

有谁能在我的代码中发现任何可能导致此错误的明显错误吗?

最佳答案

问题是他们的“文本大小”设置为“更大”(或者“最大”):
Your code is here,它看起来与IE8中“较大”文本的客户端截图一模一样。
现在你可以重现这个问题,你应该能够解决它。
我会提供更好的指导,但如果不能看到整个网站,很难做到这一点。
“宽屏监视器”部分不相关-您正在最外面的容器(width: 960px)上声明.menu。无论屏幕宽度是多少,它都将960px

关于html - 水平菜单在宽屏监视器上显示不正确,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/6095308/

10-11 20:02