我一直在尝试创建一个分为三个部分的菜单:
- 左
- 中间
- 对
然后我这样做了:
现在如您所见,左侧菜单受到中间菜单的影响,即使我这样做了:
display:inline
然后我还尝试增加上面的 navgroups 类:
1000px
或者删除这一行,但它不会改变任何东西。
感谢您的帮助!
更新:
除了上面写的之外,我想尝试用图像而不是文字来尝试中间菜单,然后我就添加了这个:<img src="..">
但是图像太低了,我想把它放得更高一些。
有人可以帮我解决这个问题吗?
非常感谢支持,很棒的论坛!
最佳答案
如果您希望它们全部水平排列,则应将它们全部向左浮动。这是一个 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/
关于javascript - CSS ul 受到另一个 ul 的影响,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21586471/