Question

我有以下CSS / HTML设置http://jsfiddle.net/UDAUY/

如何将下拉菜单字段与父素标签下的中心对齐，如下所示

| MENU 1 | MENU 2 | MENU 3 | MENU 4 |
-------------------------------------
    | Field 1 | Field 2 |
    ---------------------

而不是这个，

| MENU 1 | MENU 2 | MENU 3 | MENU 4 |
-------------------------------------
         | Field 1 | Field 2 |
         ---------------------

现在的样子。另外，我可以设置子菜单ul容器的宽度来动态调整吗？现在，我把它设置为一个任意高的值，它适用于所有实际目的，但想知道这是否可行。

修改

为了吸引更好的答案，我加入了赏金。我正在寻找一种仅用于CSS的方法（没有JS），以及相对单位，而不是绝对的。此外，字段数量无关紧要（您不必担心极长/包装问题。但是，从2更改为4不应改变居中）。

Answer 1

这是一个纯粹的css中心，几乎“完成”了。

http://jsfiddle.net/gNanu/

只要我们在包装器上显示：block，它就适用于动态数量的子菜单项和中心。一旦我们删除它并隐藏子菜单，它就会有点松动。我会再看一下，看看我能做些什么。

修改

这可能是你用css做的最好的。 http://jsfiddle.net/gNanu/4/

有时它并不完美，我没有进行任何跨浏览器测试。

Answer 2

http://pmob.co.uk/pob/centred-float.htm

（使用display：inline;和text-align：center;也可以，但也有自己的缺点）

Answer 3

我补充说：

#menu .submenu {
    position: absolute;
    display: none;
    top: 19pt;
    left: -25%;
    width:300%;
    margin: auto;
}

不确定在所有浏览器中都会坚如磐石。顺便问这样一个问题的好方法......

Answer 4

尝试...

menu {text-align:center}
fieldwrapper {margin:0 auto;}
field {}

Answer 5

#menu .submenu {
position: absolute;
display: none;
top: 19pt;
width:300%;
margin: auto;
left: -100%;
text-align:center;
}

.submenu li {
background-color: #000;
margin-right: 1.5%;
padding-right: 3%;
padding-left: 3%;
margin: 0 auto;
display: inline-block;
}

这使它对我有用。希望这是你正在寻找的答案，因为我刚加入并且没有费心去阅读所有的答案......只是潜入了它。

Answer 6

父母需要相对位置，孩子绝对，然后孩子必须在父母内部。通过cotrolling孩子top:（顶部必须包括父级身高）和left:，你可以控制它的位置。如果你想要居中，你将需要使用：top: [parentheight]; left: 0;希望它有所帮助：）

如何在父标签下设置下拉菜单？

6 个答案: