我一直在我的网站上实现 Mega Menu Reloaded，但我无法在不同的屏幕分辨率下正确对齐 div 标签!
这是:what it looks like在我重写了 Mega Menu 的部分 css 之后。
我已经尝试了几个小时来解决这个问题，但作为 css 的初学者，我似乎无法解决它。
我相信这是与其位置相关的 CSS 文件
.megamenu_fixed {
width:960px;
height:44px;
position:fixed;
right:0;
margin:0 auto 0 -480px;
z-index:2;
background-image:url("../img/bg.png");
background-color: #3d3d3d;
padding-left:12px;
}
.megamenu {
position:absolute;
margin:0;
width:960px;
font-size:0.982em;
list-style:none;
padding:0px;
line-height:38px;
font-weight: bold;
display:block;
list-style:none;
top:41px;
padding-left:42%;
}
这是正确放置的位置代码
#nav-main { right:0; top:55px; list-style: none;}
#nav-main li {list-style: none; float:left; position:relative; padding-left:20px; }
在此先感谢您的帮助，或为我指明正确的方向。 :)
最佳答案
尝试使用相对而不是绝对定位。
此外，如果失败，请尝试将左侧指定为百分比(即大约 50% 是菜单开始的位置)，并将宽度也指定为百分比(100% 应该只使用从 div 的最左边的点到屏幕最右侧。如果不是，请尝试 50% 宽度)。
问题出在您的 HTML 中，而不是您的 CSS(我认为。好吧，我修复了隐藏“成人”的部分，那是一个语法错误)
span声明 Adults 的地方打错了。我替换了 <span class="drop"><adults< span=""> (问题代码)与 <span class="drop">adults</span>和“成人”显示正确。但是，它向右有点压扁，但我相信那是因为“bad”页面左上角的图像。 ' 版本，' good 上没有'版本
PS:我把旧答案留在那里，因为人们可能有类似的问题，实际上是 CSS 出了问题。如果您认为它被认为是“偏离主题”，请告诉我，我会删除它
更新:哦，还有一件事我忘了提，要修复被压扁的 megamenu，只需编辑 CSS 中的位置，这应该会使它恢复正常
或者，您可以(几乎)完全废弃 div 并改用表格。有时可能会令人困惑，但我认为这是完全值得的。您只是不能合并/拆分单元格(拆分只是在表中创建一个表)。使用 microsoft word 或 openoffice writer 或类似软件，并在表格中创建表格以用于图形“基本布局”，以帮助您找出必要的代码。这是一个起点:Formatting layout with tables on gitHub
关于css - <ul> <li> 在不同屏幕分辨率下的 Div 标签问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12135586/