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