Windows 10上的导航菜单呈现问题

Question

我有一个网站https://goo.gl/fk8X7z正在显示Nav。谷歌Chrome53.0.2785.143版的菜单呈现问题。商店菜单完全脱离了原来的位置，即黑带(http://prntscr.com/ctvxgv)，同样的菜单出现在Windows 7上，我们如何解决这个问题？

谢谢!

Answer 1

您的“ul”元素被设置为宽度为1000 in，而最后一个子元素“li”元素在某些系统的新行上中断，因为一行中的所有元素都没有足够的空间(一个是由于字体渲染、百分比计算等原因造成的系统)。

您可以使'ul‘元素100%宽，和中心的内部'li’元素。

.main_menu1 .wrapper {
    width: 100%;
    text-align: center;
}

.nav1 .main_menu1 ul li {
    display: inline-block;
    float: none;
}

这应该可以修复比包装器最大宽度1000 of更大的屏幕的错误。实际上，在网站的响应性方面，让子元素准确地放入容器中的像素是一种糟糕的做法；没有使用百分比值、其他一些技术，或者在元素在新的线上断裂时准备好。你还必须解决小屏幕上的菜单问题(包装器的最大宽度为1000 max)。用较少的词；菜单没有完全响应。