android - 侧导航栏未显示在移动设备中？

Question

所以我对整个 css 和 div 还是个新手，请原谅我的糟糕编码。 :/无论如何，我已经完成了一个网站，但奇怪的是侧边导航栏没有出现在移动浏览器(如 Chrome 和默认的 android 浏览器)上。关于为什么的任何想法？感谢所有帮助。

http://escobarboxing.com/

此外，我已经通过 Chrome、FF 和 Opera 在我的桌面上对其进行了测试，它似乎工作正常，但另一个使用 Chrome 的用户说他没有看到它？

Answer 1

是的，这是因为:#menu{position: absolute;}

因为位置是绝对的，并且主要内容居中，所以当屏幕尺寸较小时，菜单会位于内容后面。您可以通过将屏幕调整得非常窄来对此进行试验。

为了快速修复，删除position:absolute，这将解决您的问题，但这是我的建议:

从#menu 和#container 中删除绝对位置和相对位置。从#container 中移除 Margin right 和 left: auto，然后 float #container left (float:left;)。最后，将自动左右边距应用于#site(您需要先指定宽度，看起来 920px 应该可以)。 #menu 将保留在#container 旁边，并且两者都将以页面为中心。

为了更好地衡量，我会在网站上方添加一个 100% 高度和宽度的 div (#wrapper)。

另外，旁注，如果你输入“position: absolute;”在任何情况下，它都从元素的“流”中移除，因此边距不会影响它。这是一篇帮助我确定职位的好文章:http://www.barelyfitz.com/screencast/html-training/css/positioning/

欢迎来到 CSS!这很有趣，有时会加重。我希望你喜欢。