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