移动设备上的网站答案

【问题标题】：Site on Mobile Device移动设备上的网站
【发布时间】：2014-12-19 14:03:22
【问题描述】：

我不明白为什么当在移动设备上查看时，我的网站会一直显示我的菜单图标，以及所有这些额外的空白滚动空间。有谁知道如何删除所有多余的空间并移动我的菜单栏以使其居中？

【问题讨论】：

【解决方案1】：

为了使它居中，第一件事你需要做的是删除 display:block从.main-navigation。所以你的@ 987654324@ 将如下所示：

.main-navigation{
    text-align:center !important;
    line-height:1.5;
}

第二件事您需要做的是，float:left 已分配给 .main-navigation li，所以请删除它并添加 @987654328 @.所以你的.main-navigation li 看起来像这样：

    .main-navigation li{
        position:relative;
        display:inline-block;
    }

所以您的菜单将如下所示：

【讨论】：

【解决方案2】：

Rohil 对添加到导航标签上方的 div 是正确的，因此您需要将其删除，此外，当您单击菜单时，您还有另一个问题是菜单实际上没有执行任何操作。您需要为移动导航的切换状态添加一个 css 规则，如下所示：

.main-navigation.toggled ul { display: block!important; }

【讨论】：

谢谢，我添加了您编写的代码，它使菜单按钮现在可以工作。我首先添加填充的原因是最后一次尝试将我的菜单栏置于桌面视图的中心。你知道我怎么能居中吗？这是我网站的链接：beeandcompany.com
你说的是哪个菜单？
对不起，主导航栏有“关于”“订阅”等。
您需要将您的 css 行 1233 更改为以下内容：.main-navigation { margin: auto; width: 513px; }