更新：

Question

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

左
中东
右键

然后我这样做了：

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

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等于图像高度。我不确定你想要他们如何排队，但这会让你调整它。这是一个小提琴：http://jsfiddle.net/QE7Yd/7/

Answer 2

ul（像div一样）会自动显示一个display：block就意味着它会占据它所在容器的整个宽度。就我而言，我会为它生成三个包含div的div处理浮动。这是一个Fiddle来帮助解释。所有的div都有一个浮动，因为我从来没有发现在这个目的中混合不同类型的花车是有用的。

.navgroups {
    margin: 0 auto;
}
.navgroups .menuleft {
    padding:0px;
    float: left;
}
.navgroups .menuright {
    padding: 0px;
    float: left;
}
.navgroups .menumiddle {
    padding: 0px;
    float: left;
    text-align: center;
}

另外，要从ul中删除项目符号，请将其添加到css中，这样可以防止图像向下移动。

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

Answer 3

如果您仍然无法居中，可以在.navgroups div周围添加另一个容器。

这是带小提琴的CSS：http://jsfiddle.net/QE7Yd/4/

.navwrap {
    text-align:center;
}

.navgroups {
    display:inline-block;
    background-color:#CC0000;
}

.navgroups:before,
.navgroups:after {
    display:table;
    content:'';
    clear:both;
}

.navgroups li {
    display: inline;
    padding: 5px;
}
.navgroups .menuleft {
    padding:0px;
    float: left;
}
.navgroups .menumiddle {
    padding: 0px;
    float: left;
}
.navgroups .menuright {
    padding: 0px;
    float: left;
}

基本上，您告诉.navgroups被视为和inline元素一样，并使用.navwrap说明里面的文字应该居中。

CSS ul受到另一个ul的影响

更新：

3 个答案: