javascript - CSS ul 受到另一个 ul 的影响

Question

我一直在尝试创建一个分为三个部分的菜单:

• 左
• 中间
• 对

然后我这样做了:

JSFIDDLE

现在如您所见，左侧菜单受到中间菜单的影响，即使我这样做了:

display:inline

然后我还尝试增加上面的 navgroups 类:

1000px

或者删除这一行，但它不会改变任何东西。

感谢您的帮助!

更新:

除了上面写的之外，我想尝试用图像而不是文字来尝试中间菜单，然后我就添加了这个:

<img src="..">

但是图像太低了，我想把它放得更高一些。
有人可以帮我解决这个问题吗？

非常感谢支持，很棒的论坛!

Answer 1

如果您希望它们全部水平排列，则应将它们全部向左浮动。这是一个 update to your fiddle展示。 ...

.navgroups {
    margin: 0 auto;
    display: table;
}
.navgroups li {
    display: inline;
    padding: 5px;
}
.navgroups .menuleft {
    padding:0px;
    float: left;
}
.navgroups .menumiddle {
    padding: 0px;
    float: left;
    text-align: center;
}
.navgroups .menuright {
    padding: 0px;
    float: left;
    text-align: right;
}

更新:为了容纳您在更新中提到的图像，您可以在文本上添加一个等于图像高度的 line-height。我不确定您希望它们如何排列，但这可以让您进行调整。这是一个 fiddle :http://jsfiddle.net/QE7Yd/7/