0

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

http://escobarboxing.com/

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

4

3 回答 3

2

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

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

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

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

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

另外，请注意，如果您输入“位置：绝对；” 在任何情况下，它都会从元素的“流”中删除，因此边距不会影响它。这是一篇很棒的文章，帮助我弄清楚了位置：http ://www.barelyfitz.com/screencast/html-training/css/positioning/

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

于 2013-02-08T04:46:17.837 回答
0

您应该尝试将菜单 div 添加到容器并删除绝对位置。我看到太多 div 所以尝试使用更少的 div。为什么需要那个 cssmenu div？

    <div id="container">
    <div id="menu">
    <div id="cssmenu">
    </div>
    </div>
    <div class="insta">
    </div>
      rest of content
    </div> end container

                .insta {
                color: #333333;
                width: 100%;
                margin-left: auto;
                margin-right: auto;
                -webkit-border-radius: 7px;
                -moz-border-radius: 7px;
                border-radius: 7px;
                -moz-box-shadow: 0 0 10px 0 #000;
                -webkit-box-shadow: 0 0 10px 0 #000;
                box-shadow: 0 0 10px 0 #000;
                background: #EDEDED;
                float:right;
                width:770px;
                }
                #container {
                overflow: auto;
                height: auto;
                width:920px;
                                    margin:0 auto;
                }
            #menu {
            float: left;
            margin-top: 25px;
            }

希望这个答案有帮助。

于 2013-02-08T06:41:27.733 回答
0

尝试使用 %'s 而不是固定宽度。正在发生的事情是在较小的屏幕上，菜单被您的内容块覆盖，因为该块对于屏幕来说太大了。要了解我的意思，请使用您的智能手机打开网站，然后将容器的大小调小。当您刷新时，您将看到您的菜单出现。我在这台笔记本电脑上有 Firefox，菜单也没有显示给我。

于 2013-02-08T04:37:42.993 回答