CSS Image会导致菜单出现问题

Question

我有这个JSBIN菜单代码 我一直试图在菜单中间放置一张图片，就像JSBIN代码一样。
但有两个问题：

• 从左侧菜单（“关于我们”）到边缘的距离和与右侧菜单的距离（“交换参考线”）不同。
• 图像会降低菜单。

我尝试使用line-height设置并尝试使用图片的位置，但没有帮助。

谢谢！

Answer 1

试试这个

.navgroups li {
   float:left;
   list-style:none;
}

以下是 JSBIN 并删除显示：内联。

Answer 2

您需要将padding: 0添加到.navgroups .menu：

.navgroups .menu {
    display: table;
    margin: 0 auto;
    padding: 0;
}

并将.navgroups li更改为：

.navgroups li {
    float:left;
    list-style-type:none;
} 

<强> Updated JSBIN