1

我一直在我的网站上实施 Mega Menu Reloaded On，但我无法在不同的屏幕分辨率上正确对齐 div 标签！

这是：它应该是什么样子

这是：我重写了 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; }

在此先感谢您的帮助，或为我指明任何正确的方向。:)

4

1 回答 1

2

尝试使用相对而不是绝对定位。另外，如果做不到这一点，请尝试将左侧指定为百分比（即大约 50% 是菜单开始的位置），宽度也指定为百分比（100% 应使其仅从最左边的点div到最右边的点使用屏幕的一侧。如果不是，请尝试 50% 宽度）。

问题在于您的 HTML，而不是您的 CSS（我认为。好吧，我修复了隐藏“成人”的部分，这是一个语法错误）

span声明 Adults的地方输入错误。我用“成人”替换<span class="drop"><adults< span="">（问题代码）并正确显示。但是，它向右有点挤压，但我相信那是因为'坏'版本<span class="drop">adults</span>的页面左上角的图像，而'好'版本没有这些图像

PS：我把旧答案留在那里，因为人们可能有类似的问题，实际上是 CSS 有问题。如果您认为它被认为是“离题”，请告诉我，我会删除它


更新：哦，还有我忘了提的事情，要修复压扁的 megamenu，只需编辑 CSS 中的位置，它应该会恢复正常

Alternatively, you can scrap div (almost) entirely and use tables instead. can be confusing sometimes, but in my opinion it's totally worth it. You just can't merge/split cells (to split just create a table within a table). Use microsoft word or openoffice writer or something like that and create tables within tables for graphical "base layout" to help you figure out the necessary code. Here's a starting point: Formatting layout with tables on gitHub

于 2012-08-27T02:39:35.660 回答