html - 导航栏 'overflow' 无法删除

Question

对于所有的困惑和错误的帖子类型，我深表歉意。我将继续使用它或尝试按顺序获取所有 css，以便我可以将其正确粘贴到此处。

感谢您提供的信息和帮助。

格雷迪

我不确定是否有人可以帮助我，但出于某种原因，我无法弄清楚为什么我的导航栏有一个没有任何阴影标记的“阴影”。这很烦人，我无法弄清楚。我能够将整个导航栏更改为与背景相同的颜色，但它并不突出。如果您能给我任何建议或可以尝试的事情，那就太好了!

这是常规 View 下的导航图片，然后我放大并拍摄了另一张照片。

https://dl.dropboxusercontent.com/u/11217802/nav%20bar%20issue.png

我试过 border: none 和 box-shadow: none 但似乎没有什么可以消除那个小溢出。

更新:

我应该先发布这个。我没有完整的 html/css，因为我使用的是 wordpress，所以代码不完全是我要分享的。欢迎您在这里查看我们的网站，http://jrummy16.com/test/

我刚刚使用 Chrome 中的控制台或 Firefox 中的 Firebug 来设置样式。

提前致谢

格雷迪

Answer 1

这与overflow或box-shadow无关。您在边缘看到的只是父元素背景的延续。

您可以通过更正蓝色支持导航的位置来解决此问题，使其正确对齐远端边缘并且不会在末尾留下小部分。

---

编辑:查看实际代码，有两个“流氓”像素导致您的右间距过大。第一个像素来自 css 行 394 的边框:

#mainmenu.scaled li.menu-item a {
  border: 1px solid #E2E2E2;
}

您可以将它留在这里，以便元素周围的 1px 边框保持不变，或者您可以使用 :last-child 伪选择器将其从最后一个导航中删除，以设置 border-右:无；

所以第二个流氓像素来自导航中的清除 div。删除此 div 并应用 CSS 清除修复程序似乎是最佳解决方案。一个基本的清理是在容器元素上设置 overflow:hidden;，但如果您的情况需要，您可以使用更强大的 css 清理。