CSS不能中心菜单和子菜单2nt行中的空白

Question

我正在网上商店https://amres.manoverskis.lt/上使用CSS。菜单栏过得很不好。首先，我无法将其居中。我遇到的第二个问题是，当您将鼠标悬停在第一个菜单项（PAVEIKSLAI）子菜单上时，该菜单中的第一个项比第二个菜单要左。我似乎找不到这是怎么回事。 谢谢。

Answer 1

尝试添加：

0.000000

和

#hor-menu {
display:flex;
justify-content:center
}

使菜单居中

要删除子菜单中的左间隙，请在ul中重新设置边距：

#hor-menu>.grid_60 {
display:flex;
justify-content:center
}

Answer 2

添加：

#hor-menu { 
padding-left: 25%;
}

，然后将第二个子菜单（ fs2 grid_12 omega子菜单2-column submenu-2-column-2 ）的UL类别更改为>（ fs2 grid_12 alpha submenu-2-列submenu-2-column-1 ）

Answer 3

我为您创建了2个示例。希望对您有所帮助。

1-如果您想让导航在内容区域中对齐。

#hor-menu {
    display: flex;
    justify-content: center;
}

2-如果希望导航在屏幕中心对齐。

#hor-menu {
    display: flex;
    justify-content: center;
}

并将HTML中的网格类名称从<div class="grid_60">更改为<div class="grid_0">。

Answer 4

#main-menu { /* center menu */
  display: flex;
  justify-content: center;
}

#content-wrap ul#main-menu li a {
  text-align: left; /* fix menu item */
}

要进入中心菜单，您只需使其灵活即可，现在大多数浏览器都支持它。

在导航中，第二项只是居中对齐，因此看起来像边距。