如何居中下拉菜单下的父选项卡？ [英] How to center dropdown menu under parent tab?

问题描述

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

I have the following CSS/HTML setup http://jsfiddle.net/UDAUY/

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

How do I align the drop down menu field to center itself under the parent tab like this

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

$ b b

而不是这样，

instead of this,

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

$ b b

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

which is how it looks right now. Also, can I set the width of the submenu ul container to adjust dynamically? Right now, I've set it to an arbitrarily high value, which works for all practical purpose, but would like to know if this is possible.

编辑

我添加了一个赏金，希望能吸引更好的答案。我正在寻找一个CSS的方法（没有JS），和相对单位，不是绝对的。此外，字段的数量不应该重要（你不必担心极长的/包装问题..但是，从2改为4不应该改变中心）。

I've added a bounty in the hopes of attracting better answers. I'm looking for a CSS only approach (no JS), and with relative units, not absolute. Also, the number of fields shouldn't matter (You don't have to worry about extremely long/wrapping issues.. However, changing from 2 to 4 shouldn't alter the centering).

推荐答案

这里是一个纯粹的CSS中心，几乎完成。

Here's a pure css centering that's "almost" done.

http://jsfiddle.net/gNanu/

它适用于动态数量的子菜单项和中心，只要我们在包装器上有display：block。一旦我们删除它，并隐藏子菜单，它得到一个有点scewed。

It works for a dynamic amount of submenu items and centers properly as long as we have display: block on the wrapper. Once we remove that and hide the submenu, it gets a bit scewed. I will look at it a bit more and see if i can do anything else.

编辑：

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

This is probably the best you can do with css. http://jsfiddle.net/gNanu/4/

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

It doesn't center perfectly sometimes, and i haven't done any cross browser testing.

这篇关于如何居中下拉菜单下的父选项卡？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！