Question

我正在使用在650px及以下生效的媒体查询动员网站。无论出于何种原因，我无法将导航菜单置于页面中心。我的导航菜单位于无序列表中。我在FireBug花了一个多小时试图弄清楚这件事没有任何成功。有些css Guru可以帮我这个!!？

这是网站...... http://shoponlinedemo.com/junkyard-zombiez/

Answer 1

看来你在这里有很多相互冲突的风格，比如浮动：左边包含divs等，我一直玩萤火虫，我觉得这个问题的最快和最容易解决的问题就是这个css。（确保你只使用这个css在你需要的页面宽度;

@media all and (max-width: 650px) {
    #navigation {
        clear: left;
        float: left;
        height: auto;
        margin-left: 25%;
        margin-right: 25%;
        margin-top: 0;
        width: 50%;
    }
    #navigation li {
     width: 100%;
    }
}

Answer 2

在你的CSS的@media all和（max-width：650px）部分中，你应该进行以下更改：

#navigation, .menu {
   width:100%;
}

.menu .menu-item {
   float:none;
   margin-left:auto;
   margin-right:auto;
   display:block
}

为了保证金：自动将您的内容居中，它需要一个容器占据整个宽度或者居中。对于边距：自动工作，居中的元素需要具有设置的宽度。

由于您的lis可能需要更改宽度，理想情况下无论宽度如何都会保持居中，因此最好将所有lis放在容器中，该容器的宽度是移动浏览器的宽度的100％，然后将它们居中在那个容器内。这就是为什么你需要使导航和菜单div 100％宽度。

此外，你不能将浮动的div居中，所以你需要从lis中清除浮动。然后简单地应用display：block; margin-left：auto; margin-right：auto;你会有一个居中的菜单！

UL不会以移动视图为中心

2 个答案: