Question

我一直在我的网站上实施Mega Menu Reloaded On，我无法在不同的屏幕分辨率上正确对齐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; }

提前感谢您的帮助，或指点我正确的方向。：）

Answer 1

尝试使用相对而不是绝对定位。如果没有，请尝试将左侧指定为百分比（即大约50％是菜单开始的位置），宽度也指定为百分比（100％应该仅使用div的最左侧点在屏幕的最右侧。如果没有，请尝试50％宽度。

<小时/> 问题在于你的HTML，而不是你的CSS（我想。好吧，我修复了'Adults'隐藏的部分，这是语法错误）

宣布成人的span输入错误。我将<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

使用<ul> <li> </li> </ul>在不同屏幕分辨率上显示Div标记

1 个答案: