Question

我在为网站实施的横向菜单上遇到了一个小问题。该菜单仅包含三个项目，但在相当大的宽屏显示器上查看时，最后一项显示为折叠到新行。我实际上无法对此进行测试，因为我的客户使用了宽屏显示器，虽然我无法重现错误，但他们已将此屏幕截图发送给我。

enter image description here

客户端在Windows 7上使用Internet Explorer 8，我在正常大小的监视器上测试了这个浏览器和操作系统，这似乎有效。这似乎是宽屏问题。

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

enter image description here

以下是我对菜单的代码。

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

中减少一些宽度

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

Answer 2

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

enter image description here

Your code is here，它看起来与IE8中“更大”文本的客户端屏幕截图完全相同。

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

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

“宽屏显示器”部分无关紧要 - 您在最外面的容器（width: 960px）上声明.menu。无论屏幕宽度是多少，它都是960px。

Answer 3

试试这个 .nav-item { 字体大小：2em的; 保证金左：5em的; }

当然，如果chrome（用户的浏览器）增加了太多的文本大小，无论它使用ems最终会破坏什么，因为它们当然基于文本大小。

<subjective> 通常，最佳做法是将百分比用于文本大小，并将像素用于边距/填充/距离，以实现浏览器之间的最佳组合。

同样使用重置css（如YUI base-reset-fonts.css）也是一个好主意 </subjective>

Answer 4

我建议您使用宽度标记。

如何删除“nav”中的那个？

对不起，这不是一个问题。这个问题很容易解决，你可以弄清楚自己，如果你试图改变一些事情......

我对这个问题的最好建议是你得到一个体面的工具来“测试”CSS并看到结果“直播”。我很满意Firefox / Chrome FireBug扩展程序（但它不保存结果，你必须复制并粘贴它）。

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

4 个答案: