如何在响应式网站中设置菜单？ （例）

Question

我在网站页面上设置一个愚蠢的菜单时遇到了一些严重的困难。我知道我可以将外部div的宽度设置为px值，但是我如何才能使它成为响应式网站的中心？这是页面：

http://103.4.17.225/~america/index.php/product-menu/vertical-garden/gro-wall-3

菜单是好处，画廊等。

谢谢你们，你们是炸弹。

Answer 1

要使水平菜单居中我经常使用内嵌块方法而不是浮动方法，尝试将其添加到样式表中：

.sidemen .nav { text-align: center }
.sidemen ul li {
    float: none; /* this will override your current line, just for testing */
    display: inline-block;
}

如果您将代码添加到样式表中，则可以删除当前的 float 规则，只需添加 display 一个。

如果您调整浏览器的大小，菜单将居中，无论如何，除非您做到极小的尺寸，我建议使用media queries来调整菜单渲染（减少边距或调整样式可能会在两行中显示。

Answer 2

首先，从ul中删除float并将其设置为inline block;

.met_main_nav ul {
    float: none;
    display: inline-block;
}

然后使用它的父元素（nav元素）将它居中，这将使其中的任何内联块元素居中（即ul）：

.met_main_nav {
    text-align: center;
}