导致 CSS 菜单问题的解决方案答案

【问题标题】：Resolutions causing CSS menu issue导致 CSS 菜单问题的解决方案
【发布时间】：2014-09-19 14:28:03
【问题描述】：

我已经尝试解决这个问题大约一个星期了，但没有运气。我不明白是什么导致菜单在 a) 不同的分辨率和 b) 不同的缩放级别下改变长度。

http://www.aplustutoring.com.au/JoomlaInstall/index.php/about

您可以清楚地看到菜单不等于应有的正文长度（如果不尝试不同级别的缩放）。我已经对菜单进行了很多更改，并且我开始认为这是导致问题的原因。

关于我应该更改哪些 css 属性的任何想法？谢谢。

【问题讨论】：

【解决方案1】：

我将删除“rt-container”上的 padding-left 和 padding-right，同时删除“rt-containerInner”上的所有填充并删除 margin-left。基本上有很多容器，有些容器的左右填充值不同。我会通过删除任何左右填充和边距并仅添加到需要它的单个项目（如果有）来简化一切。

此外，菜单容器未完全填满菜单项，因此存在差异。如果你有完整的 .css 文件，我可以帮忙整理一下

希望这会有所帮助。

【讨论】：

你好。感谢您的帮助，但问题仍然存在。您能否详细说明菜单容器以及我如何解决此问题？谢谢。
在 Chrome 中，您可以右键单击菜单项 -> 检查元素 -> 从将出现在新窗口或页面底部的元素中选择“rt-menubar”。因此，当您将鼠标悬停在每个项目上时，您将看到它是否对齐或需要调整，您也可以在其中进行更改以预览将发生的情况。在这个视图中，很明显菜单没有填满整个菜单容器。应该考虑到这一点。

【解决方案2】：

这是使用百分比作为边距的原因。我不知道为什么要使用这些。要解决此问题，请打开模板文件夹中的 template.css 文件。

在第 8 行，更改：

margin: -0.2% 0 0;

到这里

margin: 0;

在 第 114 行，更改此内容

margin-top: -1.9%;

到这里：

margin-top: 0;

在第 114 行，您可以将 0 更改为适合您需要的值，但请坚持使用像素作为度量单位。

希望对你有帮助

【讨论】：

您好，感谢您的帮助。然而;我试过这个，仍然是同样的问题。菜单在缩放时仍然向左/向右移动，或者在不同的屏幕分辨率下具有不同的位置。我还应该清除浏览器缓存以查看更改吗？
并非总是必要的，但还是请尝试清除浏览器缓存。如果您打开了全局配置，也请尝试清除全局配置中的 Joomla 缓存。
啊抱歉，我完全误读了这个问题。我的回答解决了菜单根据浏览器宽度上下移动的问题
别担心，你能看看向右移动的菜单吗？具体来说，它看起来“固定”在左侧，但右侧确实略有移动。再次感谢
如果我正确地关注了您的问题，那么这是非响应元素的典型行为。您是否希望菜单宽度根据浏览器的宽度进行调整？